النافذة المشروطة التي كنت تنتظرها. أو كيفية استدعاء نافذة منبثقة من أزرار مختلفة على JS خالص

مساء الخير اسمي بوريس تشيريبانوف ، أقوم بتطوير مواقع على WordPress و bitrix. لقد عملت في المشروع هنا. كان أحد القيود عدم استخدام jquery ، ولكن كان علي الاتصال بنفس النافذة المشروطة من الأزرار المختلفة. في الواقع ، هذه مهمة بسيطة إلى حد ما ، لكنني قررت المضي قدمًا وإنشاء نافذة مشروطة سيتم إنشاؤها عند النقرة الأولى ، وحفظ حالتها ، ولها منشئ للاتصال ، وما إلى ذلك. وفي النهاية ، لم أندم. سأشرح لماذا في وقت لاحق. قمت "بلف" هذه النافذة المشروطة في حل جاهز يمكن استخدامه باستمرار.

التثبيت

تثبيت مثل هذا "مشروط" بسيط. قم بتنزيل ملف 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 - معرف طبقة التعتيم
• selector - سمة html التي ستكون على جميع الأزرار التي ستسبب نافذة مشروطة
• selectorValue - قيمة المحدد
• bntID - معرف الزر لإغلاق النافذة المشروطة
• المحتوى - نص أو 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(); } 

بالمناسبة ، في وقت من الأوقات ، ساعدني مقال مع تعلم جافا سكريبت على التعامل مع هذا. التعرف على ذلك سيكون مفيدا.

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.

الملخص

ونتيجة لذلك ، وبفضل نهج الكائن ، تمكنت من إنشاء ليس فقط النوافذ المنبثقة ، ولكن تقريبًا تطبيق ويب لدي فيه 2 أجاكس لاستلام النموذج وإرسال الترجمة الخاصة بالمتصفح وقراءة ملفات تعريف الارتباط وتحميل الرسوم المتحركة. وبفضل هذا ، لم أكن بحاجة للبحث عن عناصر جديدة من قِبل محددات مختلفة للترجمة أو العمل مع بيانات النموذج الذي "وصل" بواسطة ajax.

آمل أن تجد مقالتي مفيدة. حظ موفق