💪🏿 🤥 ⁉️ मोडल - सही मोडल विंडो 🧔🏼 🈴 👩🏾‍🎨

बहुत बार मोडल विंडो और डायलॉग jQuery प्लगइन्स का उपयोग करके किए जाते हैं। उदाहरण के लिए, SimpleModal या jqModal । दुर्भाग्य से, उनमें से सभी, डिफ़ॉल्ट रूप से, सही ढंग से काम नहीं करते हैं।

"सही" क्या है?

एक मोडल विंडो, परिभाषा के अनुसार, उपयोगकर्ता के काम को मूल विंडो के साथ तब तक रोकती है जब तक उपयोगकर्ता इसे बंद नहीं कर देता। वह है:

उपयोगकर्ता को पृष्ठ के नीचे स्क्रॉल करने की अनुमति नहीं दी जानी चाहिए।
उसी समय, यदि मोडल विंडो में बहुत अधिक सामग्री है, तो आपको सामग्री को स्क्रॉल करने की आवश्यकता है।

इस सिद्धांत से, फेसबुक और Vkontakte पर फ़ोटो देखना काम करता है, और, मेरा मानना है कि मोडल विंडो के लिए यह सही विकल्प है।

कार्यान्वयन विवरण के साथ आपको अग्रिम रूप से पीड़ा नहीं देने के लिए, मैं सबसे पहले jQuery प्लगइन डेमो दिखाऊंगा: http://rmcreative.ru/playground/modals_plugin/demo.html ।

खैर, अब कार्यान्वयन के बारे में थोड़ा।

विचार काफी सरल है। खुले राज्य में, मार्कअप इस तरह से निकलता है:

<html> <head> ... </head> <body class="lock"> <div class="shim"> <div class="modal"> ... <h1>Hi, I'm the modal demo.</h1> ... </div> </div> ... </body> </html>

सीएसएस इसे लागू किया जाता है:

 /*         .     body,   IE — html */ .lock { /*       */ overflow: hidden; } /*  (    ) */ .shim { /* ,      */ position: fixed; bottom: 0; left: 0; top: 0; right: 0; /*      ,   */ overflow: auto; /*    iPad*/ -webkit-overflow-scrolling: touch; } /*     iPad */ .shim > * { -webkit-transform: translateZ(0px); } /*   :     */ .shim { background: rgba(0,0,0,0.5); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000); /* IE6–IE8 */ zoom: 1; }

वह सब है। यह एक jQuery प्लगइन में लपेटने के लिए बना हुआ है जो ईएससी पर बंद होने की तरह उपयोग करने और बन्स को जोड़ने के लिए सुविधाजनक है। मुझे इस API के साथ एक प्लगइन मिला:

 $.modal().open({ onOpen: function(el, options){ $.get('http://example.com/', function(data){ el.html(data); }); } });

आप इसे जीथुब पर ले सकते हैं ।

फिलहाल, कई बुरी चीजें हैं, जो उम्मीद है कि समुदाय को ठीक करने में मदद करेगा:

एफएफ में एक कीबोर्ड स्क्रॉल, एक मोडल विंडो के बजाय एक पेज स्क्रॉल करेगा।
IPad पर, स्क्रॉलिंग बहुत स्थिर काम नहीं करती है (कभी-कभी पृष्ठ स्क्रॉल करना)।
मध्य माउस बटन दबाकर स्क्रॉल करना सही ढंग से काम नहीं करता है।
यदि कोई स्क्रॉल दिखाई देता है या निकाला जाता है, तो मोडल विंडो खोलना पृष्ठ को बदल देता है।

रचनात्मक आलोचना और सलाह का बहुत स्वागत है।

मोडल - सही मोडल विंडो

More articles: