लाइटबॉक्सेस, वापरकर्ता सूचना किंवा पूर्णपणे सानुकूल सामग्रीसाठी आपल्या साइटवर संवाद जोडण्यासाठी बूटस्ट्रॅपचे JavaScript मॉडेल प्लगइन वापरा.
हे कसे कार्य करते
बूटस्ट्रॅपच्या मॉडेल घटकासह प्रारंभ करण्यापूर्वी, आमचे मेनू पर्याय नुकतेच बदलले असल्याने खालील वाचा याची खात्री करा.
मॉडेल HTML, CSS आणि JavaScript सह तयार केले जातात. ते दस्तऐवजातील इतर सर्व गोष्टींवर स्थित आहेत आणि <body>त्याऐवजी मॉडेल सामग्री स्क्रोल करण्यासाठी वरून स्क्रोल काढा.
मॉडेल "पार्श्वभूमी" वर क्लिक केल्याने मॉडेल आपोआप बंद होईल.
बूटस्ट्रॅप एका वेळी फक्त एका मॉडेल विंडोला समर्थन देतो. नेस्टेड मॉडेल समर्थित नाहीत कारण ते खराब वापरकर्ता अनुभव आहेत असे आम्हाला वाटते.
मॉडेल वापरतात position: fixed, जे काहीवेळा त्याच्या प्रस्तुतीकरणाबद्दल थोडेसे विशिष्ट असू शकतात. जेव्हा शक्य असेल तेव्हा, इतर घटकांकडून संभाव्य हस्तक्षेप टाळण्यासाठी तुमचे मॉडेल एचटीएमएल उच्च-स्तरीय स्थितीत ठेवा. .modalदुसर्या निश्चित घटकामध्ये घरटे बांधताना तुम्हाला समस्या येण्याची शक्यता आहे.
खाली एक स्थिर मॉडेल उदाहरण आहे (म्हणजे त्याचे positionआणि displayअधिलिखित केले गेले आहे). मोडल हेडर, मॉडेल बॉडी (साठी आवश्यक padding), आणि मोडल फूटर (पर्यायी) समाविष्ट आहेत. जेव्हा शक्य असेल तेव्हा डिसमिस क्रियांसह मॉडेल शीर्षलेख समाविष्ट करा किंवा दुसरी स्पष्ट डिसमिस क्रिया प्रदान करा असे आम्ही विचारतो.
मॉडेल शीर्षक
मॉडेल बॉडी मजकूर येथे जातो.
थेट डेमो
खालील बटणावर क्लिक करून कार्यरत मॉडेल डेमो टॉगल करा. ते खाली सरकले जाईल आणि पृष्ठाच्या शीर्षस्थानी फिकट होईल.
मॉडेल शीर्षक
वाह, तुम्ही हा मजकूर एका मॉडेलमध्ये वाचत आहात!
स्थिर पार्श्वभूमी
पार्श्वभूमी स्थिर वर सेट केल्यावर, त्याच्या बाहेर क्लिक केल्यावर मॉडेल बंद होणार नाही. ते वापरून पाहण्यासाठी खालील बटणावर क्लिक करा.
मॉडेल शीर्षक
तुम्ही माझ्या बाहेर क्लिक केल्यास मी बंद होणार नाही. एस्केप की दाबण्याचाही प्रयत्न करू नका.
लांब सामग्री स्क्रोलिंग
जेव्हा वापरकर्त्याच्या व्ह्यूपोर्ट किंवा डिव्हाइससाठी मॉडेल्स खूप लांब होतात, तेव्हा ते पृष्ठापासून स्वतंत्रपणे स्क्रोल करतात. आम्हाला काय म्हणायचे आहे ते पाहण्यासाठी खालील डेमो वापरून पहा.
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
तुम्ही स्क्रोल करण्यायोग्य मॉडेल देखील तयार करू शकता जे मध्ये जोडून मॉडेल बॉडी स्क्रोल करण्यास अनुमती .modal-dialog-scrollableदेते .modal-dialog.
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
टूलटिप्स आणि पॉपओव्हर्स
आवश्यकतेनुसार टूलटिप आणि पॉपओव्हर्स मॉडेलमध्ये ठेवल्या जाऊ शकतात. जेव्हा मॉडेल बंद केले जातात, तेव्हा कोणत्याही टूलटिप आणि पॉपओव्हर्स देखील आपोआप डिसमिस होतात.
मध्ये नेस्ट करून मॉडेलमध्ये बूटस्ट्रॅप ग्रिड सिस्टमचा वापर .container-fluidकरा .modal-body. नंतर, सामान्य ग्रिड सिस्टम वर्ग वापरा जसे तुम्ही इतरत्र कुठेही वापरता.
Grids in modals
.col-md-4
.col-md-4 .ml-auto
.col-md-3 .ml-auto
.col-md-2 .ml-auto
.col-md-6 .ml-auto
Level 1: .col-sm-9
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6
भिन्न मॉडेल सामग्री
थोड्या वेगळ्या सामग्रीसह सर्व समान मॉडेल ट्रिगर करणार्या बटणांचा समूह आहे? कोणत्या बटणावर क्लिक केले आहे त्यानुसार मॉडेलमधील सामग्री बदलण्यासाठी HTML विशेषता (शक्यतो jQuery द्वारेevent.relatedTarget ) वापरा .data-*
खाली HTML आणि JavaScript चे लाइव्ह डेमो आहे. अधिक माहितीसाठी, वरील तपशीलांसाठी मॉडेल इव्हेंट डॉक्स वाचाrelatedTarget .
New message
अॅनिमेशन बदला
व्हेरिएबल मोडल फेड-इन अॅनिमेशनच्या आधीची $modal-fade-transformट्रान्सफॉर्म स्थिती निर्धारित करते , व्हेरिएबल मोडल फेड-इन अॅनिमेशनच्या शेवटी बदल निर्धारित करते ..modal-dialog$modal-show-transform.modal-dialog
तुम्हाला उदाहरणार्थ झूम-इन अॅनिमेशन हवे असल्यास, तुम्ही सेट करू शकता $modal-fade-transform: scale(.8).
अॅनिमेशन काढा
पाहण्यासाठी फिकट होण्याऐवजी दिसणार्या मॉडेलसाठी, .fadeतुमच्या मॉडेल मार्कअपमधून वर्ग काढून टाका.
डायनॅमिक हाइट्स
मोडल उघडे असताना त्याची उंची बदलल्यास, $('#myModal').modal('handleUpdate')स्क्रोलबार दिसल्यास तुम्ही मॉडेलची स्थिती पुन्हा समायोजित करण्यासाठी कॉल करावा.
प्रवेशयोग्यता
मॉडेल शीर्षकाचा संदर्भ देत, कडे , आणि स्वतः जोडणे role="dialog"आणि जोडणे सुनिश्चित करा . याव्यतिरिक्त, तुम्ही वर सह तुमच्या मोडल संवादाचे वर्णन देऊ शकता .aria-labelledby="...".modalrole="document".modal-dialogaria-describedby.modal
YouTube व्हिडिओ एम्बेड करत आहे
मोडल्समध्ये YouTube व्हिडिओ एम्बेड करण्यासाठी आपोआप प्लेबॅक आणि बरेच काही थांबवण्यासाठी बूटस्ट्रॅपमध्ये नसलेली अतिरिक्त JavaScript आवश्यक आहे. अधिक माहितीसाठी हे उपयुक्त स्टॅक ओव्हरफ्लो पोस्ट पहा .
पर्यायी आकार
मॉडेल्सचे तीन पर्यायी आकार आहेत, जे मॉडिफायर क्लासेसद्वारे उपलब्ध आहेत .modal-dialog. अरुंद व्ह्यूपोर्टवर क्षैतिज स्क्रोलबार टाळण्यासाठी हे आकार विशिष्ट ब्रेकपॉइंट्सवर किक इन होतात.
मॉडेल प्लगइन डेटा विशेषता किंवा JavaScript द्वारे मागणीनुसार तुमची लपवलेली सामग्री टॉगल करते. हे डिफॉल्ट स्क्रोलिंग वर्तन ओव्हरराइड .modal-openकरण्यासाठी जोडते आणि मॉडेलच्या बाहेर क्लिक करताना दर्शविलेले मॉडेल डिसमिस करण्यासाठी क्लिक क्षेत्र प्रदान करते.<body>.modal-backdrop
डेटा विशेषतांद्वारे
JavaScript न लिहिता एक मॉडेल सक्रिय करा. कंट्रोलर घटकावर सेट करा data-toggle="modal", जसे की बटणासह, data-target="#foo"किंवा href="#foo"टॉगल करण्यासाठी विशिष्ट मॉडेल लक्ष्य करण्यासाठी.
JavaScript द्वारे
myModalJavaScript च्या एका ओळीसह id सह मॉडेल कॉल करा :
पर्याय
डेटा विशेषता किंवा JavaScript द्वारे पर्याय पास केले जाऊ शकतात. डेटा विशेषतांसाठी, पर्यायाचे नाव , मध्ये data-प्रमाणे जोडा data-backdrop="".
नाव
प्रकार
डीफॉल्ट
वर्णन
पार्श्वभूमी
बुलियन किंवा स्ट्रिंग'static'
खरे
मॉडेल-बॅकड्रॉप घटक समाविष्ट करते. वैकल्पिकरित्या, staticएका पार्श्वभूमीसाठी निर्दिष्ट करा जे क्लिक किंवा एस्केप की दाबल्यावर मॉडेल बंद करत नाही.
कीबोर्ड
बुलियन
खरे
एस्केप की दाबल्यावर मॉडेल बंद करते
लक्ष केंद्रित
बुलियन
खरे
प्रारंभ केल्यावर मॉडेलवर लक्ष केंद्रित करते.
दाखवा
बुलियन
खरे
आरंभ केल्यावर मॉडेल दाखवते.
पद्धती
असिंक्रोनस पद्धती आणि संक्रमणे
सर्व API पद्धती असिंक्रोनस आहेत आणि एक संक्रमण सुरू करतात . संक्रमण सुरू होताच परंतु ते संपण्यापूर्वी ते कॉलरकडे परत जातात . याव्यतिरिक्त, संक्रमण घटकावरील पद्धत कॉलकडे दुर्लक्ष केले जाईल .
तुमची सामग्री मॉडेल म्हणून सक्रिय करते. पर्यायी पर्याय स्वीकारतो object.
.modal('toggle')
मॅन्युअली एक मॉडेल टॉगल करते. मॉडेल प्रत्यक्षात दर्शविले किंवा लपविण्यापूर्वी (म्हणजे shown.bs.modalकिंवा hidden.bs.modalघटना घडण्यापूर्वी) कॉलरकडे परत येते.
.modal('show')
मॅन्युअली एक मॉडेल उघडते. मॉडेल प्रत्यक्षात दर्शविले जाण्यापूर्वी कॉलरकडे परत येते (म्हणजे shown.bs.modalघटना घडण्यापूर्वी).
.modal('hide')
मॅन्युअली एक मॉडेल लपवते. मॉडेल प्रत्यक्षात लपविण्याआधी कॉलरकडे परत येते (म्हणजे hidden.bs.modalघटना घडण्यापूर्वी).
.modal('handleUpdate')
मॉडेल उघडे असताना त्याची उंची बदलल्यास (म्हणजे स्क्रोलबार दिसल्यास) मॉडेलची स्थिती व्यक्तिचलितपणे समायोजित करा.
.modal('dispose')
घटकाचे मॉडेल नष्ट करते.
कार्यक्रम
बूटस्ट्रॅपचा मॉडेल क्लास मोडल फंक्शनॅलिटीमध्ये जोडण्यासाठी काही इव्हेंट्स उघड करतो. सर्व मॉडेल इव्हेंट्स मॉडेलवरच (म्हणजेच <div class="modal">) उडवले जातात.
कार्यक्रमाचा प्रकार
वर्णन
show.bs.modal
showजेव्हा उदाहरण पद्धत कॉल केली जाते तेव्हा हा इव्हेंट लगेच फायर होतो . क्लिकमुळे झाले असल्यास, क्लिक केलेला घटक relatedTargetइव्हेंटची मालमत्ता म्हणून उपलब्ध असतो.
दाखवले आहे.bs.modal
जेव्हा मॉडेल वापरकर्त्यासाठी दृश्यमान केले जाते तेव्हा हा कार्यक्रम काढला जातो (CSS संक्रमण पूर्ण होण्याची प्रतीक्षा करेल). क्लिकमुळे झाले असल्यास, क्लिक केलेला घटक relatedTargetइव्हेंटची मालमत्ता म्हणून उपलब्ध असतो.
hide.bs.modal
hideजेव्हा उदाहरण पद्धत कॉल केली जाते तेव्हा हा इव्हेंट लगेच काढला जातो .
hidden.bs.modal
जेव्हा मॉडेल वापरकर्त्यापासून लपविले जाणे पूर्ण केले जाते तेव्हा हा कार्यक्रम काढला जातो (CSS संक्रमण पूर्ण होण्याची प्रतीक्षा करेल).
hidePrevented.bs.modal
जेव्हा मॉडेल दाखवले जाते, त्याची पार्श्वभूमी असते staticआणि मॉडेलच्या बाहेर एक क्लिक किंवा एस्केप की दाबली जाते तेव्हा हा कार्यक्रम काढला जातो.