Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. HTML5
Webdesign

HTML५  "dialog" या घटकाचा उपयोग करुन पॉप-अप आणि मोडल तयार करणे.

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called Strange and Unusual HTML.
How to Use HTML5 “picture”, “srcset”, and “sizes” for Responsive Images
HTML5 Form Validation With the “pattern” Attribute

Marathi (मराठीे) translation by Rahul Thakare (you can also view the original English article)

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

अशा परिस्थितीत त्या क्रियेसाठी सामान्यत: एक वापरानुभव (युझर-एक्सपिरीयन्स UX) दृष्टिकोन - संवादचौकट (डायलॉग-बॉक्स) वापरली जाते, ज्यात चालू क्रिया रद्द करण्यासाठी एक व पुढे जाण्यासाठी दुसरे अशी दोन बटणं असतात. गतकाळापासुन आपण यासाठी जावास्क्रिप्ट (Javascript) लायब्ररी वापरत आलेलो आहोत,  मात्र या शिकवणीत आपण या कामासाठी प्रायोगिक स्थानिक घटक <dialog> चा वापर करणार आहोत.

Dialog घटकाचा वापर करुन

<dialog> हा HTML५ (अधिक स्पष्टपणे ५.१) चा घटक आहे. यास "विभागिय मुळ" (sectioning root) संबोधले जाते जो, <body>, <blockquote> आणि <details> या घटकांप्रमाणेच स्वतंत्रपणे एक नविन विभाग स्थापन करतो. तुम्ही यास body या घटकाच्या बाळ (child element) घटकाप्रमाणे स्थापित करू शकता किंवा <div> वा <section> या घटकांप्रमाणे आत अंतर्भूतीत करू शकता. ह्या दोन्ही पद्धती वैध आहेत.

क्रोम ३७+ (Chrome 37+) आणि ऑपेरा २७+ (Opera 27+) हे ब्राउझर्स <dialog> या घटकाला  मुळत: लपवुन ठेवतात. या लपवलेल्या घटकांना पुन्हा दृष्य स्वरुपात आणण्यासाठी जावास्क्रिप्ट (Javascript) च्या show() किंवा showModal() या आणि पुन्हा लपविण्यासाठी close() पद्धतींचा (methods) वापर करावा लागतो. सहसा आपण ही मेथड (method) click इव्हेंट साठी खालीलप्रमाणे चालवतो:

show() विरुद्ध showModal() मेथड

येथे हे लक्षात घ्यावे लागेल की, show() आणि showModal() या दोन्ही मेथड्स वेग-वेगळ्या पद्धतिंनी कार्य करतात.

show() मेथड DOM प्रवाहातील (flow) घटकाच्या स्थानानुसार त्या घटकास दृष्य स्वरुपात आणतो. जर तुम्ही त्यास </body> टॅग च्या लगेच अगोदर जोडल्यास तर तो घटक वेब पृष्टाच्या अगदी तळाशी दिसेल. म्हणुन, त्याची जागा समायोजित करण्यासाठी (उदा. त्यास पृष्टावर केंद्रीत करण्यासाठी) आपणास सानुकूलित शैली (Customized styles) जोडाव्या लागतील. सामान्यत: अशा शैलीत (स्टाईल्स) z-index ही प्रॉपर्टी विविध घटकांना एकमेकांवर रचण्यासाठी आणि position ही left आणि top सहीत absolute अशी सेट केली जाते.

दुसऱ्या बाजुला showModal() मेथडद्वारे घटकास मोडलप्रमाणे दाखविले जाते. ते मुळत: पृष्टाच्या केंद्रभागी दाखवले जाते आणि ते फुलस्क्रिन एपीआय (fullScreen API) प्रमाणे पृष्टावर सर्वांत वर असते, जेणेकरुन z-index,संबंधित स्थिती (relative position)आणि पिता घटकाचे (parent element)व्यर्थ विस्तारणे (overflow) प्रतिबंधित करते.

बहुतांश परिस्थितींमध्ये show() ऐवजी showModal() मेथड वापरणे सोईचे ठरते.

शैली (styles) सानुकूलित करणे

संवाद चौकट ही ब्राउझरच्या मुळत: निर्धारीत स्टाईल्स वापरत असते. या संवाद चौकटींना इतर HTML५ घटकांप्रमाणे सानुकूलित स्टाईल्सही देता येतात. उदा. तुम्ही संवादचौकटीची सीमा (border) बारीक करणे, कोपरे (corners) गोलाकार बनवणे आणि सावली (drop shadow) जोडणे इ. करु शकता.

त्यालाच जोडून, जेव्हा <dialog>  घटक हा (showModal() मेथड वापरुन) मोडल म्हणुन दाखवला जातो, तेव्हा आपण ::backdrop हा आणखी एक दिखाऊ घटक (pseudo-element) वापरु शकतो. ::backdrop घटक हे संवादचौकटीच्या (मोडलच्या) लगेचच खाली विसावत असते, ज्याच्यामुळे संपुर्ण दृष्यपटल (view-port) आणि त्याखालील सर्व घटक हे झाकले जातात.

या backdrop ला अर्ध-पारदर्शक गडद रंग देऊन सुसज्जीत करणे हा एक प्रघात आहे. यास प्रत्यक्ष क्रियेत पाहण्यासाठी खालील लाल बटणावर क्लिक करा:

संक्रमणाद्वारे (transitions) दृष्यानुभव

संवादचौकट सानुकूलित करणे हे सरळ-सोपे आहे, पण सीएसएस संक्रमणाबद्दल (css transitions) काय? संवादचौकटीला मॅक ओएस एक्स (Mac OS X) प्रमाणे हळुहळू दृष्य स्वरुपात येतांना दाखवण्याबद्दल काय?

१ली पायरी:

सुरुवात करताना, आपण मोडलला प्रमाणात ९०% कमी करु व संक्रमण (transition) निर्देशित करु.

२री पायरी:

आता आपण एक असा क्लास (class) ठरवू जो मोडलला त्यास त्याच्या ठरवलेल्या आकारात येईपर्यंत प्रमाणात वाढवेल आणि त्यास दृष्य स्वरुपात (visible) आणेल.

३री पायरी:

येथे आपण मोडलला dialog-scale क्लास (class) जोडण्याआधी काही क्षणांकरता (milliseconds) लहान आकार देऊन त्यास "धरुन" ठेवत आहोत.  हे साध्य करण्याकरिता आपण जावास्क्रिप्टची (javascript) setTimeout() ही मेथड वापरून मोडलला क्लास जोडू.

४थी पायरी:

न विसरता हा क्लास (class) काढून टाकला जायला हवा आणि मोडल बंद (अदृष्य) झाल्यावर timeOut ला मोकळे (clear) करा.

आत्ता आपण तयार आहोत. तुम्ही खालील डेमो वापरुन पाहू शकता:

जाता जाता..

<dialog> घटक वापरण्यास खरोखर सोपा आहे, पण त्यास असणारा ब्राऊझर आधार हा फार थोडा आहे. जेव्हा सर्व प्रमुख ब्राऊझर्स या घटकास पुर्णपणे अंगिकृत करतील, तेव्हा आपले लायब्ररीज वरील अवलंबित्त्व कमी होईल, आपल्या रचना अधिक सुव्यवस्थित होतील, त्या सहायक तंत्रज्ञानास व्यवस्थितपणे उपलब्ध असतील आणि संवादचौकट-मोडल दाखविण्यासाठी आपल्याकडे प्रमाणभुत मार्ग असेल.

caniuse dialog
http://caniuse.com/#feat=dialog

तोपर्यंत तुम्ही यासाठी सहाय्य नसलेल्या ब्राऊझरवर या घटकांस आभासिरित्या चालवण्यासाठी गुगल क्रोम द्वारे निर्मिलेले polyfill हे वापरु शकता.

अधिक संसाधने:

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.