>

सर्वांना नमस्कार. मी दुसर्‍या दिवशी ब्लॉगच्या आकडेवारीकडे बारकाईने पाहिले आणि मला असे आढळले की मॉडेल विंडो तयार करण्याची उदाहरणे आमच्या इंटरनेट कर्मचार्‍यांसाठी अधिक रुचीची आहेत. जावास्क्रिप्टचा वापर न करता, केवळ शुद्ध वर पॉप-अप विंडो लागू करणे हे सर्वात लोकप्रिय उपाय होते.
माझ्या कामाच्या दरम्यान, मी बरेच मनोरंजक उपाय जमा केले आहेत, ज्यांचे मी वेगवेगळ्या वेळी माझ्या ब्लॉगच्या पृष्ठांवर तपशीलवार लेखांमध्ये तपशीलवार वर्णन केले आहे, परंतु यापैकी बरेच धडे अखेरीस पार्श्वभूमीत मिटले. ब्लॉग वाचकांना कधीकधी नेव्हिगेट करणे कठीण होऊ शकते आणि नेत्रदीपक मॉडेल्स आणि पॉप-अप फॉर्म तयार करण्याच्या बहुतेक कार्यक्षम पद्धतींकडे दुर्लक्ष केले जाते.
म्हणून, या समस्येतील वापरकर्त्यांची आवड लक्षात घेऊन, मी या विषयावरील सर्व धडे आणि उदाहरणे एकत्र करण्याचा आणि एका स्वतंत्र लेखात मॉडेल विंडो आणि फॉर्मचा संग्रह प्रदर्शित करण्याचा निर्णय घेतला. हे थोडक्यात वर्णन, उदाहरणे आणि लेखांच्या लिंक्ससह एक लहान विहंगावलोकन बाहेर वळले. म्हणून पहा, अभ्यास करा आणि जर कोणाला काही उपाय आवडत असतील तर, सोर्स कोड घ्या आणि तयार करा, तयार करा, तयार करा...

1. जावास्क्रिप्टशिवाय CSS3 सह मॉडेल विंडो

माझ्या ब्लॉगच्या वाचकांमध्ये सर्वात लोकप्रिय, मॉडेल विंडो तयार करण्याची पद्धत. अंमलबजावणी करणे खूप सोपे आहे. पॉप-अप ब्लॉक्सची निर्मिती आणि सर्व कार्यक्षमता Javascript आणि अतिरिक्त ग्राफिक घटकांशिवाय पूर्णपणे CSS3 वर आधारित आहेत.
जवळजवळ कोणत्याही साइटवर मॉडेल विंडो कनेक्ट करण्याची आणि प्रदर्शित करण्याची क्षमता. एचटीएमएल-फ्रेम योग्य ठिकाणी योग्यरित्या ठेवण्यासाठी, आपल्याला आवश्यक असलेली सामग्री जोडण्यासाठी, शैली कनेक्ट करण्यासाठी, संपूर्ण गोष्टीला सक्रिय बटण किंवा साइटच्या इतर कोणत्याही घटकाशी लिंक करण्यासाठी पुरेसे आहे (चित्रे, मेनू आयटम, लिंक्स, एक शब्द मजकूरात, इ.) आणि ते सर्व आहे, जाण्यासाठी तयार आहे.

2. CSS सह मॉडेल विंडो आणि

एक अतिशय सोपा, हलका jQuery प्लगइन, ज्याच्या सहाय्याने तुम्ही तुमच्या साइटवर कोणत्याही माहितीसह मॉडेल मोडल विंडोचे प्रदर्शन जलद आणि सहज अंमलात आणू शकता, मग तो साधा मजकूर, चित्रे, विविध फॉर्म किंवा एम्बेडेड व्हिडिओ असो.
देखावा CSS वापरून तयार केला जातो, विंडोचा आकार थेट लिंकमध्ये, href="#?w=500" विशेषतामध्ये सेट केला जातो, जेथे #?w=500 आवश्यक विंडो रुंदी निर्दिष्ट करते. तथापि, धड्याच्या तपशीलांचा अभ्यास केल्यानंतर, सर्वकाही अगदी स्पष्ट होईल. हे समाधान कार्य करण्यासाठी, साइटशी कनेक्ट केलेली jQuery लायब्ररी आवश्यक आहे.

3. मध्यभागी कठोरपणे प्रतिसादात्मक मॉडेल विंडो

सुरुवातीला, धडा विशेषत: सामग्रीसह ब्लॉक घटकांच्या संपूर्ण केंद्रीकरणाबद्दल विचारात घेतला गेला होता, परंतु याबद्दल इतके लिहिले गेले आहे की मी केवळ CSS साधने वापरत असताना, थीम अनुकूलतेसह सौम्य करण्याचा आणि ते सर्व मॉडेल विंडोवर लादण्याचा निर्णय घेतला. त्यातून काय आले, आपण धड्याचा अभ्यास करून शोधू शकता.

4. HTML5, CSS3 आणि लपविलेल्या चेकबॉक्सेसवर मॉडेल विंडो

पॉप-अप (मॉडल) विंडो लागू करण्यासाठी अगदी नवीन पद्धत. ड्रॉप-डाउन माहिती ब्लॉक किंवा "" तयार करण्यासाठी मी अनेकदा लपविलेले चेकबॉक्सेस वापरतो. परिणामी, सर्व काही अगदी सोपे झाले, CSS3 आणि HTML5 च्या सिंटॅक्टिक वैशिष्ट्यांच्या मदतीने आपण मॉडेल विंडोचे कार्य सहजपणे व्यवस्थापित करू शकता. मी डिझाइनवर जास्त लक्ष केंद्रित केले नाही (तो संपूर्ण मुद्दा नाही), मी प्रारंभिक म्हणून बूटस्ट्रॅप माहिती ब्लॉक्सचे उदाहरण घेतले. ही पद्धत सर्व आधुनिक ब्राउझरमध्ये उत्तम प्रकारे कार्य करते, IE च्या मॉसी आवृत्त्यांवर अडकलेले वापरकर्ते दुर्दैवाने उडतात.

5. CSS3 मॉडेल व्हिडिओ ब्लॉक

मोडल ब्लॉकमध्ये व्हिडिओ पाहण्याचे आयोजन करण्याची थीम मला विश्रांती देत ​​नाही, केवळ CSS3 वापरून, Javascript शिवाय. नाही, मॉडेल विंडोमध्ये व्हिडिओच्या आउटपुटसह सर्वकाही व्यवस्थित आहे, विंडो बंद असताना व्हिडिओ थांबवण्यासाठी मला पुरेसे आणि योग्य उपाय सापडत नाही. मूर्खपणाने रिकाम्या href="" विशेषता असलेली लिंक वापरली, अनेक भडकलेल्या कारागिरांनी झोपेत यापेक्षा जास्त कोशही नाही, पण मला या क्षणी दुसरा प्रभावी आणि वैध उपाय सापडला नाही.

केवळ चित्रांसाठीच नाही तर मजकुरासाठीही मॉडेल विंडोमध्ये काही प्रकारचे स्लाइडर एम्बेड करणे शक्य आहे का, असे मला अनेकदा विचारण्यात आले. का नाही. बुर्जुआला सर्व बाबतीत योग्य एक साधा कंटेंट रोटेटर सापडला, तो तयार मॉडेल विंडोसह एकत्र करणे बाकी आहे. आणि शेवटी, काय झाले :)). पहा, हे करणे खूप सोपे आहे.

7. मॉडेल विंडोमध्ये संपर्क फॉर्मचे एकत्रीकरण

अनेक साइट्स पॉप-अप फीडबॅक फॉर्म, नोंदणी आणि लॉगिन फॉर्म वापरतात. तयार मॉडेल विंडोमध्ये कार्यरत फॉर्म एम्बेड करणे हा सर्वात सोपा मार्ग आहे. वर सादर केलेल्या मॉडेल विंडोची कोणतीही आवृत्ती, CSS3 मध्ये मांडलेले, हे एक सभ्य स्वरूप घेते, ते केवळ या दोन्ही घटकांना एकाच यंत्रणेमध्ये एकत्र करण्यासाठीच राहते. ते कसे करायचे? प्रस्तुत धड्यात तपशीलवार वर्णन केलेले हेच आहे.

तुमच्या वापरकर्त्यांसाठी कोणत्याही पृष्ठावरून संदेश पाठवण्याची उत्तम संधी किंवा स्वतंत्र साइट (ब्लॉग) एंट्री हा एक वेगळा, मॉडेल संपर्क फॉर्म आहे. php हँडलरला फॉर्ममध्ये योग्यरित्या बांधा, तुम्हाला आवश्यक असलेले पृष्ठ मुख्य भागामध्ये ठेवा आणि इतकेच, फक्त तुमचा मेलबॉक्स वेळोवेळी तपासणे बाकी आहे. ही पद्धत सर्व आधुनिक ब्राउझरमध्ये योग्यरित्या कार्य करते: क्रोम, फायरफॉक्स, ऑपेरा, सफारी, तसेच इंटरनेट एक्सप्लोररमध्ये, 9 व्या आवृत्तीपासून सुरू होते. CSS3 च्या जादूने फॉर्म स्वतःच मोडेल केला आहे.

लाइटबॉक्स हा समान मॉडेल विंडोचा एक प्रकार आहे, किंवा त्याऐवजी, ऑपरेशनचे तत्त्व जवळजवळ समान आहे, जरी ते मोठ्या किंवा पूर्ण-आकाराच्या प्रतिमा पाहण्यासाठी वापरले जाते. एका वेळी, मी केवळ CSS3 वापरून, Lightbox ची कमी-अधिक अनुकूल आवृत्ती बंद करण्याचा निर्णय घेतला. उदाहरण बघून यातून काय आले ते तुम्ही शोधू शकता आणि जर विषय समाविष्ट केला तर धड्याचा अभ्यास करा. IE 8 आणि त्यापेक्षा कमी व्यसनाधीन वापरकर्त्यांना दुर्दैवाने काहीही दिसणार नाही, पद्धत स्यूडो-क्लास:टारगेटच्या वापरावर आधारित आहे.

10. वेबसाइटसाठी पॉपअप संपर्क फॉर्म

साइटसाठी स्वतंत्र, मूळ डिझाइन केलेले, पॉप-अप संपर्क फॉर्म तयार करण्यासाठी एक मनोरंजक (माझ्या मते) उपाय. फॉर्मचे ऑपरेशन ऑनक्लिक इव्हेंटच्या हाताळणीवर आधारित आहे. पोस्टल लिफाफ्याच्या स्वरूपात मूळ प्रतिमा वापरून नोंदणी. फॉर्म सर्व ब्राउझरमध्ये द्रुत आणि योग्यरित्या कार्य करतो, म्हणून हे वापरकर्ता परस्परसंवाद साधनांचे एक योग्य उदाहरण आहे.

11. CSS3 आणि काही जावास्क्रिप्टसह साइट लोडवर पॉपअप

मी, तसेच इतर अनेक, साइटच्या सुरुवातीच्या लोडिंगवर विविध पॉप-अप्सद्वारे गोठलेले आहेत. मला हा दृष्टीकोन खूप अनाहूत वाटतो. परंतु चिप मागणीत आहे आणि मोठ्या प्रमाणात वापरली जाते, याचा अर्थ संपूर्ण गोष्ट कशी कार्य करते हे पाहण्यासारखे आहे. सर्व आधुनिक ब्राउझर साइट लोड करण्याच्या प्रारंभिक टप्प्यावर सर्व प्रकारच्या पॉप-अप विंडोबद्दल संशयास्पद आहेत, ते फक्त त्यांना अवरोधित करतात. सादर केलेल्या धड्यात, मी हे ब्लॉकिंग कसे बायपास केले जाऊ शकते याचे तपशीलवार वर्णन केले आहे, आपण कुकीज योग्यरित्या कसे वापरावे हे देखील शिकाल जेणेकरून वापरकर्त्याने साइटला प्रथम भेट दिल्यावर किंवा विशिष्ट अंतराने विंडो दिसेल.

बहुधा एवढेच. अर्थात, कॅशेमध्ये मॉडेल विंडो तयार करण्यासाठी आणखी काही कार्य पर्याय आहेत, परंतु इंटरनेटवर त्यापैकी बरेच आहेत, मुख्य गोष्ट म्हणजे आपल्याला आवश्यक असलेले शोधणे. मला आशा आहे की ही निवड तुम्हाला माझ्या ब्लॉगवरील लेखांच्या ढिगाऱ्यात विषय नेव्हिगेट करण्यात मदत करेल. यशस्वी उत्खनन आणि हरवलेली सामग्री शोधल्यामुळे, पुनरावलोकन अद्यतनित केले जाईल.

सर्व आदराने, अँड्र्यू

मॉडेल किंवा पॉप-अप विंडो (ते याला वेगळ्या पद्धतीने म्हणतात) ही वेबसाइटवर वापरली जाणारी अतिशय सामान्य विंडो आहे. त्याचा मुख्य उद्देश विविध माहिती (बहुधा मजकूर आणि अनेक चित्रांच्या उपस्थितीत) प्रदर्शित करणे हा आहे, जी तुम्ही कोणत्याही विशेष वस्तूवर (लिंक, बटण किंवा फोटो) क्लिक करता तेव्हा दिसते.

मॉडेल विंडोमध्ये, बहुतेक प्रकरणांमध्ये, साइटवर जागा वाचवण्यासाठी, ते फार महत्वाची माहिती लिहून देत नाहीत, उदाहरणार्थ: अभिप्राय, अधिकृतता किंवा.

असे काही वेळा असतात जेव्हा वेबमास्टर्सना काही महत्त्वाच्या इव्हेंटसह अभ्यागताचे लक्ष वेधून घ्यायचे असते, उदाहरणार्थ: बोनस आणि भेटवस्तू प्राप्त करण्यासाठी, जाहिराती आणि स्वीपस्टेक्स इत्यादींमध्ये भाग घेण्यासाठी आणि अभ्यागताच्या सहभागाशिवाय आणि इच्छेशिवाय मॉडेल विंडो पॉप अप होतात.

जेव्हा पृष्ठ उघडले जाते तेव्हा कोणीतरी या हेतूसाठी एक मॉडेल विंडो बनवते, जी जावा स्क्रिप्टचा वापर करून ठराविक कालावधीनंतर पृष्ठावर दिसते, आणि दुसरा अभ्यागताला वेगवेगळ्या मार्गांनी त्याच्या साइटवर सोडू इच्छितो आणि वापरतो. modal विंडो जेव्हा पृष्ठ बंद होते, जे त्या क्षणी पॉप अप होते, जेव्हा क्लायंट आधीच पृष्ठ सोडू आणि बंद करू इच्छितो.

मॉडेल पॉपअपचे पहिले उदाहरण.

फक्त css वापरून मॉडेल विंडो बनवण्यासाठी, तुम्हाला पॉप-अप विंडोमध्ये संदर्भित ऑब्जेक्टसाठी html कोड लिहावा लागेल आणि एक सुंदर मॉडेल विंडो योग्यरित्या प्रदर्शित करण्यासाठी शैली फाइलमध्ये पॅरामीटर्स आणि गुणधर्म नियुक्त करावे लागतील.

मॉडेल विंडो उघडा

वरील कोड कॉपी करा, पेस्ट करा आणि index.html म्हणून मजकूर दस्तऐवजात जतन करा आणि नंतर मोडल कार्य करते की नाही हे तपासण्यासाठी ब्राउझरमध्ये उघडा. येथे तुम्ही तुमच्या प्रोजेक्टच्या डिझाईनवर आधारित मॉडेल विंडोचे स्वरूप देखील समायोजित करू शकता.

उदाहरणार्थ, काही माहिती प्रदर्शित करण्यासाठी, मी बर्‍याचदा विविध अॅनिमेशन प्रभावांसह मॉडेल विंडो वापरतो, जी अधिक मनोरंजक दिसते.

बटण क्लिकवर मॉडेल विंडो

या उदाहरणात, मी मॉडेल विंडो उघडण्यासाठी बटण कसे नोंदवायचे ते दर्शवेल.
हे करण्यासाठी, आम्हाला बटण आणि मॉडेल विंडो ब्लॉकसाठी कोडमध्ये फक्त ऑनक्लिक HTML विशेषता जोडणे आवश्यक आहे आणि त्याद्वारे विशिष्ट नावाने फंक्शन कॉल करणे आवश्यक आहे.

मॉडेल विंडो कॉल करण्यासाठी बटणाचे उदाहरण (क्लिक).

मॉडेल विंडो बटण

नंतर मॉडेल विंडोचा html कोड कॉपी आणि पेस्ट करा:

मॉडेल विंडो

आणि शेवटी, आधी लिहाकॉल करण्यासाठी आणि मॉडेल विंडो बंद करण्यासाठी स्क्रिप्ट:

आपल्या मित्रांसह सामायिक करा आणि मॉडेल विंडो तयार करताना काहीतरी चूक झाल्यास प्रश्न विचारा.

मॉडेल विंडोएक कंटेनर आहे जो तुम्ही लिंक क्लिक करता तेव्हा पॉप अप होतो आणि काही माहिती प्रदान करतो. मला वाटते की बरेच लोक आधीपासूनच परिचित आहेत, परंतु जर नसेल तर ते काय आहे हे समजून घेण्यासाठी डेमो आवृत्ती पहा. आता त्यांची संख्या मोठी आहे आणि प्रत्येकजण स्वतःच्या मार्गाने कार्य करतो. उदाहरणार्थ, पूर्णपणे मानक आहेत जे तुम्हाला काही प्रकारची क्रिया करण्यास सांगतात, या उदाहरणामध्ये, पुष्टीकरण. किंवा, उदाहरणार्थ, दुसरा पर्याय, जेव्हा आपण प्रथम साइट प्रविष्ट करता, जे प्रत्यक्षात सामाजिक नेटवर्कमधील गटांच्या विविध सदस्यतांमध्ये फिट होईल. तेथे आहे मॉडेल विंडोस्वच्छ वर css, ठीक आहे, मला हा वाटा घ्यायचा आहे JavaScript, कारण ते त्यावर अधिक मनोरंजक आहे आणि सर्व ब्राउझरमध्ये चांगले कार्य करते.

पहिली पायरी. JavaScript कोड.

मॉडेल विंडो लाँच करण्यासाठी, तुम्हाला फंक्शनमध्ये मूल्य पास करणे आवश्यक आहे window.onload. ज्यामध्ये आपण ओळखकर्त्याचे दोन घटक पास करू " a"आणि" b".

// आयडी "a" आणि "b" window.onload = function() द्वारे घटक पास करा ( a = document.getElementById("a"); b = document.getElementById("b"); )

आम्ही नंतर फंक्शन लिहू " ए दाखवा", जे एक मॉडेल विंडो दर्शवेल आणि घटकांकडे जाईल" a"आणि" b"शैली, म्हणजे, लिंकवर क्लिक न केल्यास आम्ही विंडोची पारदर्शकता, रुंदी आणि ब्लॉकिंग सेट करतो" उघडा".

//"showA" फंक्शन विंडो फंक्शन दाखवा showA() ( //पारदर्शकता सेट करा आणि डिस्प्ले ब्लॉक करा // "b" घटकाचा b.style.filter = "alpha(opacity=80)"; b.style. opacity = 0.8; b .style.display = "block"; // ब्लॉकिंग आणि टॉप पॅडिंग 200px // घटक "a" a.style.display = "ब्लॉक" वर सेट करा; a.style.top = "200px"; )

मॉडेल विंडो उघडल्यानंतर, आम्हाला ते नंतर कसे तरी बंद किंवा लपवावे लागेल, यासाठी आम्ही फंक्शन लिहितो " लपवा", जे मॉडेल विंडो लपवेल आणि घटकांसाठी शैली सेट करेल" a"आणि" b".

//"hideA" फंक्शनला कॉल करा, जे "a" आणि "b" घटक फंक्शन hideA() साठी // विंडो लपवेल ( b.style.display = "none"; a.style.display = "none" ;)

पूर्ण कोड.

पायरी दोन. HTML कोड.

उघडा

टॅगमध्ये "div"अभिज्ञापक निर्दिष्ट करा " a", जे शैलींशी संवाद साधेल cssआणि कोडसह JavaScript. पुढे, दुसरा टॅग जोडा " div"आणि त्याला एक ओळखकर्ता द्या" खिडक्या", जे मॉडेलच्या कंटेनरमध्ये मार्कअप म्हणून काम करेल.

आत आम्ही दुवा सूचित करतो, जो असेल " बंद"मॉडल विंडो, स्टाईल देखील करा" पृष्ठे" आणि डीफॉल्ट शैली " वर सेट करा फ्लोट: बरोबर", म्हणजे, आम्ही वरच्या उजव्या कोपर्यात मोडल विंडोची बंद होणारी लिंक प्रदर्शित करू.

आम्ही आयडेंटिफायर लिहून देतो " b", जे विंडो लपवेल.

पूर्ण कोड.

उघडा

तिसरी पायरी. CSS कोड.

आवश्यक शैली css, ज्याशिवाय मॉडेल विंडो योग्यरित्या कार्य करणार नाही, किंवा त्याऐवजी, ती योग्यरित्या कार्य करणार नाही आणि माहिती प्रदर्शित करणार नाही.

आणि म्हणून या उदाहरणात, स्थितीशी संबंधित पहिली अनिवार्य शैली आहे निश्चित. हे तुम्हाला एक मॉडेल विंडो प्रदर्शित करण्यास अनुमती देते, त्यास फिल बॉर्डरसह मर्यादित करते. मार्गे z-इंडेक्सलिंकवर क्लिक केल्यानंतर मॉडेल विंडो किती ओळखली जाते ते आम्ही निर्दिष्ट करतो" उघडा", तसेच" बंद". तसेच प्रदर्शन: काहीही नाही, जे तुम्हाला लिंकवर क्लिक करेपर्यंत मॉडेल लपवू देते.

#b (स्थिती: निश्चित; शीर्ष: 0; डावीकडे: 0; उजवीकडे: 0; तळ: 0; प्रदर्शन: काहीही नाही; पार्श्वभूमी: राखाडी; z-इंडेक्स: 1; ) #a ( सीमा: 1px घन काळा; स्थिती: निश्चित ; पार्श्वभूमी: #eff7ff; z-index:3; display:none; ) #windows ( पॅडिंग: 5px; रुंदी: 500px; उंची: 300px; सीमा: 2px घन निळा; ) a.pages (पार्श्वभूमी: #97cdff; रंग: पांढरा; पॅडिंग: 4px; मजकूर-सजावट: काहीही नाही; ) a:hover.pages (पार्श्वभूमी: लाल; रंग: पांढरा; पॅडिंग: 4px; मजकूर-सजावट: काहीही नाही; )

आपले लक्ष दिल्याबद्दल सर्वांचे आभार!

3. लिंकद्वारे कॉल केलेल्या jQuery मॉडेलचे उदाहरण (डेमोसह)

बहुधा, तुम्ही इंटरनेटवर एक पॉप-अप मॉडेल विंडो पाहिली असेल - नोंदणी पुष्टीकरण, चेतावणी, मदत माहिती, फाइल डाउनलोड आणि बरेच काही. या ट्युटोरियलमध्ये, मी सर्वात सोप्या मॉडेल विंडो कशा तयार करायच्या याची काही उदाहरणे देईन.

एक साधा मॉडेल पॉपअप तयार करा

चला सर्वात सोप्या मॉडेल विंडोच्या कोडचा विचार करूया, जो लगेच दिसून येईल
jquery कोड

कोड कुठेही पेस्ट करा शरीरआपले पृष्ठ. पृष्ठ लोड केल्यानंतर लगेच, कोणत्याही आदेशाशिवाय, तुम्हाला अशी विंडो दिसेल:

परंतु ब्राउझरमध्ये संपूर्ण पृष्ठ लोड केल्यानंतर खालील कोड कार्यान्वित होईल. आमच्या उदाहरणात, प्रतिमांसह पृष्ठ लोड केल्यानंतर, एक साधी पॉप-अप विंडो पॉप अप होईल:

CSS सह लिंकवरून jQuery मॉडेल कॉल करणे

पुढील चरण तयार करणे आहे मॉडेल विंडोलिंकवर क्लिक करताना. पार्श्वभूमी हळूहळू गडद होईल.

लॉगिन आणि नोंदणी फॉर्म अशा विंडोमध्ये स्थित असल्याचे तुम्ही अनेकदा पाहू शकता. चला व्यवसायात उतरूया

सुरू करण्यासाठी, चला लिहूया html भाग. आम्ही हा कोड तुमच्या दस्तऐवजाच्या मुख्य भागामध्ये ठेवतो.

मोडल विंडो कॉल करत आहे

CSS कोड. एकतर वेगळ्या css फाइलमध्ये किंवा मध्ये
jQuery कोडमध्ये, आम्ही मॉडेल आणि मास्कच्या स्थितीवर, आमच्या बाबतीत, पार्श्वभूमी हळूहळू गडद होण्यावर लक्ष केंद्रित करू.

लक्ष द्या! दस्तऐवजाच्या शीर्षस्थानी लायब्ररी समाविष्ट करण्यास विसरू नका!

Google साइटवरून लायब्ररी कनेक्ट करत आहे. बरं, jQuery कोड स्वतःच.

jQuery कोड

मॉडेल्स, आच्छादन, संवाद, आपण त्यांना जे काही कॉल करू इच्छिता, या UI पॅटर्नचा पुनर्विचार करण्याची वेळ आली आहे. जेव्हा ते पहिल्यांदा दृश्यावर आले, तेव्हा मॉडेल्स हे वापरकर्ता इंटरफेस समस्येचे एक सुंदर समाधान होते. प्रथम, ते वापरकर्ता इंटरफेस सुलभ करतात. दुसरे म्हणजे, स्क्रीन स्पेस वाचवणे. तेव्हापासून, डिझायनर्सनी तत्परतेने मॉडेल्स स्वीकारले आहेत आणि काहींनी त्यांना टोकाला नेले आहे. मॉडेल्स ही भयानक पॉपअपची आजची आवृत्ती बनली आहे. वापरकर्त्यांना मॉडेल्स त्रासदायक वाटतात आणि ते सहज आणि आपोआप बंद करायला शिकले आहेत.

व्याख्या:

मॉडेल विंडो हा एक घटक आहे जो मुख्य ऍप्लिकेशन विंडोच्या वर बसतो. हे मुख्य विंडो अवरोधित करते, परंतु चाइल्ड मॉडेल विंडोच्या मागे दृश्यमान ठेवते. वापरकर्त्यांनी मूळ अनुप्रयोगावर परत येण्यापूर्वी मॉडेलशी संवाद साधला पाहिजे. - विकिपीडिया

वापर

जेव्हा आपल्याला आवश्यक असेल तेव्हा आपण मॉडेल वापरू शकता:

वापरकर्त्याचे लक्ष वेधून घ्या

अधिक महत्त्वाच्या गोष्टीकडे त्यांचे लक्ष वेधण्यासाठी तुम्ही वापरकर्त्याच्या वर्तमान कार्यात व्यत्यय आणू इच्छिता तेव्हा वापरा.

वापरकर्ता इनपुट आवश्यक आहे

जेव्हा तुम्हाला वापरकर्त्याकडून माहिती मिळवायची असेल तेव्हा वापरा. उदाहरणार्थ, नोंदणी आणि अधिकृतता फॉर्म.

संदर्भात अतिरिक्त माहिती दर्शवा

आपण मूळ पृष्ठाचा संदर्भ न गमावता अतिरिक्त माहिती दर्शवू इच्छित असल्यास वापरा. उदाहरणार्थ, मोठ्या प्रतिमा किंवा व्हिडिओ दाखवणे.

अतिरिक्त माहिती दाखवा (संदर्भाबाहेर)

जेव्हा तुम्हाला मूळ पृष्ठाशी किंवा इतर पृष्ठांपेक्षा "स्वतंत्र" असलेल्या इतर पॅरामीटर्सशी थेट संबंधित नसलेली माहिती दर्शवायची असेल तेव्हा वापरा. उदाहरणार्थ, सूचना.

टीप: त्रुटी, कार्य यश किंवा चेतावणी संदेश प्रदर्शित करण्यासाठी मॉडेल वापरू नका. त्यांना पृष्ठावर सोडा.

मॉडेल विंडोचे शरीरशास्त्र

असमाधानकारकपणे अंमलात आणलेले आच्छादन कार्याच्या मार्गात येऊ शकतात. तुमची मॉडेल विंडो वापरकर्त्यांमध्ये व्यत्यय आणण्यापासून रोखण्यासाठी, खालील गोष्टी लक्षात ठेवा:

1.एस्केप हॅच

वापरकर्त्यांना मॉडेल बंद करण्याचा मार्ग देऊन त्यांना सुटण्याचा मार्ग द्या. हे खालील मार्गांनी साध्य करता येते:

• रद्द करा बटण
• बंद करा बटण
• Escape की
• विंडोच्या बाहेर क्लिक करा

प्रवेशयोग्यता टीप: ती विंडो बंद करण्यासाठी प्रत्येक मॉडेल विंडोमध्ये प्रवेश करण्यायोग्य कीबोर्ड नियंत्रण असणे आवश्यक आहे. उदाहरणार्थ, एस्केप कीने विंडो बंद केली पाहिजे.

2. शीर्षक

मॉडेल शीर्षकासह वापरकर्ता संदर्भ द्या. हे वापरकर्त्यांना तो/ती कुठे आहे हे जाणून घेण्यास अनुमती देते कारण त्यांनी मूळ पृष्ठ सोडले नाही.

ट्विट बटणावर क्लिक केल्यानंतर ——Modal शीर्षक: नवीन ट्विट तयार करा. संदर्भ देतो.

टीप: बटण लेबल (जे मॉडेल लाँच करते) आणि मॉडेलचे शीर्षक जुळले पाहिजे

3. बटण

बटण लेबलमध्ये अर्थपूर्ण नावे असावीत. हे कोणत्याही बटणावर लागू होते. मॉडेल विंडोसाठी, 'बंद करा' बटण 'बंद करा' बटण चिन्ह किंवा 'x' म्हणून प्रस्तुत केले जावे.

इनव्हिजनमध्ये स्पष्ट बटण चिन्ह आहेत

टीप: बटण चिन्ह गोंधळात टाकणारे बनवू नका. जर वापरकर्त्याने एखादी क्रिया रद्द करण्याचा प्रयत्न केला आणि मॉडेल विंडो दुसर्‍या रद्द बटणासह पॉप अप झाली, तर गोंधळ निर्माण होतो. “मी कॅन्सल करेन का? किंवा मी ते चालू ठेवू?

4. आकार आणि स्थिती

मॉडेल खूप मोठे किंवा खूप लहान नसावे, तुम्हाला ते योग्य आकाराचे असावे असे वाटते. संदर्भ ठेवणे हे ध्येय आहे, म्हणून मॉडेलने संपूर्ण स्क्रीन घेऊ नये. सामग्री मॉडेल विंडोशी जुळली पाहिजे. स्क्रोलबार आवश्यक असल्यास, तुम्ही एक नवीन पृष्ठ तयार करू शकता.

• स्थान— स्क्रीनच्या शीर्षस्थानी, कारण मोबाइल व्ह्यूमध्ये मॉडेल खाली ठेवल्यास ते हरवले जाऊ शकते.
• आकार- मॉडेल विंडो स्क्रीनच्या 50% पेक्षा जास्त वापरू नका.

5. लक्ष केंद्रित करा

तुम्ही एखादे मॉडेल उघडता तेव्हा, लाइटबॉक्स प्रभाव वापरा (पार्श्वभूमी अंधुक करणे). हे मॉडेलकडे लक्ष वेधते आणि सूचित करते की वापरकर्ता मूळ पृष्ठाशी संवाद साधू शकत नाही.

प्रवेशयोग्यता टीप: कीबोर्ड फोकस मॉडेल विंडोवर सेट करा.

6. वापरकर्ता एक मॉडेल विंडो लाँच करतो

वापरकर्त्यांना पॉप-अप मॉडेलसह आश्चर्यचकित करू नका. वापरकर्त्याच्या कृतीला, जसे की बटण क्लिक करणे, दुव्याचे अनुसरण करणे किंवा पर्याय निवडणे, मॉडेल विंडो ट्रिगर करू द्या. सेल्फ-ओपनिंग मॉडेल्स वापरकर्त्याला आश्चर्यचकित करू शकतात आणि त्यांना त्वरीत बंद करू शकतात.

लॉग इन बटण दाबून मॉडेल विंडो ट्रिगर होते

मोबाइल उपकरणांमध्ये मॉडेल विंडो

मॉडेल्स आणि मोबाईल उपकरणे एकत्रितपणे खराब कार्य करतात. सामग्री ब्राउझ करणे कठीण आहे कारण मॉडेल खूप मोठे आहेत, खूप जास्त स्क्रीन जागा घेतात किंवा खूप लहान आहेत. डिव्हाइस कीबोर्ड आणि नेस्टेड स्क्रोलबारसारखे घटक जोडा. मॉडेल विंडोचे फील्ड पकडण्याचा प्रयत्न करून वापरकर्ते फक्त बोटे हलवू शकतात आणि झूम करू शकतात. मॉडेल्ससाठी चांगले पर्याय आहेत, म्हणून ते मोबाइल डिव्हाइसवर वापरले जाऊ नयेत.

चांगले केले modal — Facebook

उपलब्धता

कीबोर्ड

मॉडेल विंडो तयार करताना, प्रवेशयोग्य कीबोर्ड नियंत्रणे जोडण्यास विसरू नका. खालील गोष्टींचा विचार करा:

एक मॉडेल विंडो उघडत आहे- डायलॉग बॉक्सला आमंत्रित करणारा घटक कीबोर्डवरून प्रवेश करण्यायोग्य असणे आवश्यक आहे.

फोकस डायलॉगवर हलवानवीन विंडो—   जेव्हा मॉडेल विंडो उघडली जाते, तेव्हा कीबोर्ड फोकस त्याच्या सुरूवातीस हलविला जावा.

कीबोर्ड फोकस नियंत्रण  —   जेव्हा फोकस डायलॉग बॉक्समध्ये हलवले जाते, तेव्हा डायलॉग बॉक्स बंद होईपर्यंत ते त्याच्या आत "लॉक केलेले" असले पाहिजे.

संवाद बंद करत आहे  —   प्रत्येक मॉडेल विंडोमध्ये ती विंडो बंद करण्यासाठी कीबोर्ड नियंत्रण उपलब्ध असणे आवश्यक आहे.

ARIA

सक्रिय इंटरनेट ऍप्लिकेशन्सच्या उपलब्धतेसाठी मानक (प्रवेशयोग्य रिच इंटरनेट ऍप्लिकेशन्स (ARIA) वेब सामग्री आणि वेब अनुप्रयोगांची प्रवेशयोग्यता सुधारण्याचे मार्ग परिभाषित करते.

प्रवेश करण्यायोग्य मॉडेल तयार करण्यासाठी खालील ARIA टॅग उपयुक्त ठरू शकतात: भूमिका = “ संवाद” , aria- लपलेले, aria- लेबल

तसेच, खराब दृष्टी असलेल्या वापरकर्त्यांबद्दल जागरूक रहा. स्क्रीन सामग्री वाढवण्यासाठी ते मॉनिटर्सवर स्क्रीन मॅग्निफायर वापरू शकतात. झूम इन केल्यानंतर, वापरकर्ता फक्त स्क्रीनचा काही भाग पाहू शकतो. या प्रकरणात, मॉडेल विंडो मोबाइल उपकरणांप्रमाणेच प्रदर्शित केल्या जातील.

निष्कर्ष

जर लोकांनी मॉडेल्स आपोआप बंद करण्याचा प्रयत्न करायला शिकले असेल, तर तुम्ही ते का वापरू इच्छिता?

वापरकर्त्याचे लक्ष वेधून घेणे, संदर्भ राखणे आणि वापरकर्ता इंटरफेस सुलभ करणे हे मॉडेल विंडोचे मोठे फायदे आहेत. तथापि, त्यांचे तोटे देखील आहेत कारण ते वापरकर्त्याच्या अनुभवात व्यत्यय आणतात आणि मॉडेल विंडोच्या मागे सामग्री लपवून मूळ पृष्ठाशी संवाद साधणे अशक्य करतात. मॉडेल विंडो नेहमीच योग्य उत्तर असू शकत नाही. निवडताना, खालील गोष्टींचा विचार करा:

नियंत्रण यादी

• आम्ही मॉडेल कधी दाखवू?
• आम्ही मॉडेल विंडो कसे दर्शवू?
• मॉडेल विंडो कशा दिसतात?
• आम्ही कोणती माहिती प्रदान करतो आणि गोळा करतो?

मॉडेल्ससाठी एक पर्यायी UI घटक आहे: नॉन-मॉडल किंवा टोस्ट नोटिफिकेशन्स म्हणून ओळखले जाते (मटेरिअल डिझाइनमध्ये मायक्रोसॉफ्ट आणि Google द्वारे वापरलेले शब्द). अधिक जाणून घेण्यासाठी माझे पुढील पोस्ट वाचा.