जिस मोडल विंडो का आप इंतजार कर रहे थे। या शुद्ध जेएस पर अलग-अलग बटन से पॉप-अप कैसे कॉल करें

शुभ दोपहर मेरा नाम बोरिस चेरेपोनोव है, मैं वर्डप्रेस और बिट्रिक्स पर वेबसाइट विकसित कर रहा हूं। मैंने यहां प्रोजेक्ट पर काम किया। सीमाओं में से एक jquery का उपयोग नहीं करना था, लेकिन मुझे अलग-अलग बटन से एक ही मोडल विंडो को कॉल करना था। वास्तव में, यह एक काफी सरल कार्य है, लेकिन मैंने आगे बढ़ने और एक मोडल विंडो बनाने का फैसला किया जो पहली क्लिक पर बनाई जाएगी, इसकी स्थिति को बचाएगी, कॉलिंग के लिए एक कंस्ट्रक्टर होगा, आदि। और अंत में, मुझे इसका अफसोस नहीं था। बाद में क्यों समझाऊंगा। मैं इस मोडल विंडो को टर्नकी समाधान में "लिपटा" करता हूं जिसका उपयोग लगातार किया जा सकता है।

स्थापना

इस तरह के "मोडल" को स्थापित करना सरल है। जेएस फ़ाइल डाउनलोड करें और कनेक्ट करें। यह किसी भी घटना या पुस्तकालयों पर निर्भर नहीं करता है, इसलिए आप जहां आवश्यकता हो वहां से कनेक्ट कर सकते हैं। यहाँ 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 - dimming परत आईडी
• चयनकर्ता - 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

मेरे "मामले" में अजाक्स का उपयोग करके फ़ॉर्म को लोड करना आवश्यक था (यह कार्य प्रक्रिया में दिखाई दिया)। मेरे शुरुआती दृष्टिकोण के लिए धन्यवाद, मैं काफी समय बचाने में कामयाब रहा। मैंने प्रोटोटाइप के माध्यम से विस्तार किया।

 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; } 

सीएमएस वर्डप्रेस के लिए मेरे पास ऐसा अनुरोध कोड था।

परिणाम

नतीजतन, ऑब्जेक्ट दृष्टिकोण के लिए धन्यवाद, मैं न केवल पॉप-अप बनाने में कामयाब रहा, बल्कि लगभग एक वेब एप्लिकेशन है जिसमें मुझे फॉर्म प्राप्त करने और सबमिट करने, ब्राउज़र-विशिष्ट अनुवाद, कुकीज़ पढ़ने, एनीमेशन लोड करने के लिए 2 ajax हैं। इसके लिए धन्यवाद, मुझे ajax द्वारा "आए हुए" फॉर्म के डेटा के साथ अनुवाद या काम करने के लिए विभिन्न चयनकर्ताओं द्वारा नए तत्वों की तलाश नहीं करनी है।

मुझे उम्मीद है कि आपको मेरा लेख उपयोगी लगा होगा। सौभाग्य है