您正在等待的模式窗口。 或者如何从纯JS上的不同按钮调用弹出窗口

下午好 我叫Boris Cherepanov，我正在开发有关wordpress和bitrix的网站。 我在这里从事这个项目。 局限性之一是不使用jquery，但是我不得不从不同的按钮调用相同的模式窗口。 实际上，这是一个相当简单的任务，但是我决定继续制作一个模态窗口，该窗口将在第一次单击时创建，保存其状态，并具有用于调用的构造函数，等等。 最后，我并不后悔。 稍后我将解释原因。 我将此模态窗口“包装”为可以始终使用的交钥匙解决方案。

安装方式

安装这样的“模式”很简单。 下载js文件并连接。 它不依赖于任何事件或库，因此您可以在需要的地方进行连接。 这是github上的链接

初始化

在需要调用的页面上，用js编写：

new XMC({ bodyID: 'body', backgroundLayerID: 'wrapper', selector: 'data-type', selectorValue: 'openModalForm', btnId: 'mfClose', content: '', classListBg: ['zuzu', 'zaza'], classListBody: ['zuzu', 'zaza2'], classListBtn: ['zuzu', 'zaza3'], styleBg: { top: '0', left:'0', right: '0', bottom: '0', position: 'fixed', background: '#00000090', justifyContent: 'center', alignItems: 'center', zIndex: '6' }, styleBody: { minWidth: '200px', minHeight: '200px', background: '#ffffff', justifyContent: 'center', alignItems: 'center', }, btnStyle: { width: '40px', height: "40px", background: '#ffffff', display: 'flex', justifyContent: 'center', alignItems: 'center', position: 'absolute', top: '5%', right: '5%', cursor: 'pointer' } }); 

有关对象中项目的更多信息

有6个必需点：

• bodyID是将包含模态窗口内容的块的标识符
• backgroundLayerID-调暗图层ID
• 选择器-将在将导致模式窗口的所有按钮上的html属性
• selectorValue-选择器值
• bntID-关闭模式窗口的按钮的ID
• 内容-模态窗口内的文本或html

可选，但很重要的一点：

• classListBg，classListBody，classListBtn-分别为调光层，主窗口和关闭按钮的类数组
• styleBg，styleBody，btnStyle-分别具有调光层，主窗口和关闭按钮的样式的对象

关于模态窗口本身的一些知识

我已经说过，该模式窗口解决的主要任务是从多个按钮调用。 单击几个按钮来调用js是一个典型的委托示例，在XMC（我称为模态窗口）中，实现方式如下：

 XMC.prototype.delegateClick = function () { var mf = this; window.addEventListener('click', function () { //     ,          if(event.target.hasAttribute(mf.selector) && event.target.getAttribute(mf.selector) === mf.selectorValue ){ mf.show(); //    mf.delegateClose(); //     } }, mf, false); }; 

因此，在构造函数中，您需要注册：

 var XMC = function (object) { /*   */ this.delegateClick(); } 

顺便说一句，一次，一篇关于学习javascript的文章帮助我解决了这一问题。 熟悉它会很有用。

表格的AJAX

在我的案例中，有必要使用ajax加载表单（此任务出现在过程中）。 由于最初的方法，我设法节省了很多时间。 我扩展了原型。

 XMC.prototype.ajax = function () { var mf = this; var data = new Object(); //  ,    ,    data = JSON.stringify(data); var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function () { if(this.readyState == 4 && this.status == 200){ mf.body.innerHTML = this.responseText; mf.sendClickDelegate(mf.form); mf.i18n(); } }; xhttp.open('POST', localizationPreloader.adminUrl + "?action=my_action", true); xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhttp.send("data="+data); return this; } 

我对CMS Wordpress有这样的请求代码。

总结

结果，由于采用了对象方法，我不仅制作了弹出窗口，而且还制作了几乎一个Web应用程序，其中有2个Ajax用于接收表单和提交，特定于浏览器的翻译，阅读cookie，加载动画。 因此，我不必通过各种选择器来寻找新元素来转换或使用由ajax“到达”的形式的数据。

希望您对我的文章有所帮助。 祝你好运