मोडल
लाइटबॉक्सेस, वापरकर्ता सूचना किंवा पूर्णपणे सानुकूल सामग्रीसाठी आपल्या साइटवर संवाद जोडण्यासाठी बूटस्ट्रॅपचे JavaScript मॉडेल प्लगइन वापरा.
हे कसे कार्य करते
बूटस्ट्रॅपच्या मॉडेल घटकासह प्रारंभ करण्यापूर्वी, आमचे मेनू पर्याय नुकतेच बदलले असल्याने खालील वाचा याची खात्री करा.
- मॉडेल HTML, CSS आणि JavaScript सह तयार केले जातात. ते दस्तऐवजातील इतर सर्व गोष्टींवर स्थित आहेत आणि
<body>
त्याऐवजी मॉडेल सामग्री स्क्रोल करण्यासाठी वरून स्क्रोल काढा. - मॉडेल "पार्श्वभूमी" वर क्लिक केल्याने मॉडेल आपोआप बंद होईल.
- बूटस्ट्रॅप एका वेळी फक्त एका मॉडेल विंडोला समर्थन देतो. नेस्टेड मॉडेल समर्थित नाहीत कारण ते खराब वापरकर्ता अनुभव आहेत असे आम्हाला वाटते.
- मॉडेल वापरतात
position: fixed
, जे काहीवेळा त्याच्या प्रस्तुतीकरणाबद्दल थोडेसे विशिष्ट असू शकतात. जेव्हा शक्य असेल तेव्हा, इतर घटकांकडून संभाव्य हस्तक्षेप टाळण्यासाठी तुमचे मॉडेल एचटीएमएल उच्च-स्तरीय स्थितीत ठेवा..modal
दुसर्या निश्चित घटकामध्ये घरटे बांधताना तुम्हाला समस्या येण्याची शक्यता आहे. - पुन्हा एकदा, मुळे
position: fixed
, मोबाइल डिव्हाइसवर मॉडेल वापरण्याबाबत काही सावधगिरी बाळगल्या आहेत. तपशीलांसाठी आमचे ब्राउझर समर्थन दस्तऐवज पहा. - HTML5 त्याचे शब्दार्थ कसे परिभाषित करते यामुळे, बूटस्ट्रॅप मॉडेल्समध्ये
autofocus
HTML विशेषताचा कोणताही प्रभाव पडत नाही. समान प्रभाव प्राप्त करण्यासाठी, काही सानुकूल JavaScript वापरा:
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})
prefers-reduced-motion
मीडिया क्वेरीवर अवलंबून असतो. आमच्या प्रवेशयोग्यता दस्तऐवजीकरणाचा कमी गती विभाग पहा
.
डेमो आणि वापर मार्गदर्शक तत्त्वे वाचत रहा.
उदाहरणे
मॉडेल घटक
खाली एक स्थिर मॉडेल उदाहरण आहे (म्हणजे त्याचे position
आणि display
अधिलिखित केले गेले आहे). मोडल हेडर, मॉडेल बॉडी (साठी आवश्यक padding
), आणि मोडल फूटर (पर्यायी) समाविष्ट आहेत. जेव्हा शक्य असेल तेव्हा डिसमिस क्रियांसह मॉडेल शीर्षलेख समाविष्ट करा किंवा दुसरी स्पष्ट डिसमिस क्रिया प्रदान करा असे आम्ही विचारतो.
<div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
थेट डेमो
खालील बटणावर क्लिक करून कार्यरत मॉडेल डेमो टॉगल करा. ते खाली सरकले जाईल आणि पृष्ठाच्या शीर्षस्थानी फिकट होईल.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
स्थिर पार्श्वभूमी
पार्श्वभूमी स्थिर वर सेट केल्यावर, त्याच्या बाहेर क्लिक केल्यावर मॉडेल बंद होणार नाही. ते वापरून पाहण्यासाठी खालील बटणावर क्लिक करा.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
Launch static backdrop modal
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
लांब सामग्री स्क्रोलिंग
जेव्हा वापरकर्त्याच्या व्ह्यूपोर्ट किंवा डिव्हाइससाठी मॉडेल्स खूप लांब होतात, तेव्हा ते पृष्ठापासून स्वतंत्रपणे स्क्रोल करतात. आम्हाला काय म्हणायचे आहे ते पाहण्यासाठी खालील डेमो वापरून पहा.
तुम्ही स्क्रोल करण्यायोग्य मॉडेल देखील तयार करू शकता जे मध्ये जोडून मॉडेल बॉडी स्क्रोल करण्यास अनुमती .modal-dialog-scrollable
देते .modal-dialog
.
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
अनुलंब केंद्रीत
मॉडेलला अनुलंब मध्यभागी जोडा .modal-dialog-centered
..modal-dialog
<!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">
...
</div>
<!-- Vertically centered scrollable modal -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
...
</div>
टूलटिप्स आणि पॉपओव्हर्स
आवश्यकतेनुसार टूलटिप आणि पॉपओव्हर्स मॉडेलमध्ये ठेवल्या जाऊ शकतात. जेव्हा मॉडेल बंद केले जातात, तेव्हा कोणत्याही टूलटिप आणि पॉपओव्हर्स देखील आपोआप डिसमिस होतात.
<div class="modal-body">
<h5>Popover in a modal</h5>
<p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
<hr>
<h5>Tooltips in a modal</h5>
<p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>
ग्रिड वापरणे
मध्ये नेस्ट करून मॉडेलमध्ये बूटस्ट्रॅप ग्रिड सिस्टमचा वापर .container-fluid
करा .modal-body
. नंतर, सामान्य ग्रिड सिस्टम वर्ग वापरा जसे तुम्ही इतरत्र कुठेही वापरता.
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
<div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div>
</div>
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
</div>
भिन्न मॉडेल सामग्री
थोड्या वेगळ्या सामग्रीसह सर्व समान मॉडेल ट्रिगर करणार्या बटणांचा समूह आहे? कोणत्या बटणावर क्लिक केले आहे त्यानुसार मॉडेलमधील सामग्री बदलण्यासाठी HTML विशेषता (शक्यतो jQuery द्वारेevent.relatedTarget
) वापरा .data-*
खाली HTML आणि JavaScript चे लाइव्ह डेमो आहे. अधिक माहितीसाठी, वरील तपशीलांसाठी मॉडेल इव्हेंट डॉक्स वाचाrelatedTarget
.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
अॅनिमेशन बदला
व्हेरिएबल मोडल फेड-इन अॅनिमेशनच्या आधीची $modal-fade-transform
ट्रान्सफॉर्म स्थिती निर्धारित करते , व्हेरिएबल मोडल फेड-इन अॅनिमेशनच्या शेवटी बदल निर्धारित करते ..modal-dialog
$modal-show-transform
.modal-dialog
तुम्हाला उदाहरणार्थ झूम-इन अॅनिमेशन हवे असल्यास, तुम्ही सेट करू शकता $modal-fade-transform: scale(.8)
.
अॅनिमेशन काढा
पाहण्यासाठी फिकट होण्याऐवजी दिसणार्या मॉडेलसाठी, .fade
तुमच्या मॉडेल मार्कअपमधून वर्ग काढून टाका.
<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>
डायनॅमिक हाइट्स
मोडल उघडे असताना त्याची उंची बदलल्यास, $('#myModal').modal('handleUpdate')
स्क्रोलबार दिसल्यास तुम्ही मॉडेलची स्थिती पुन्हा समायोजित करण्यासाठी कॉल करावा.
प्रवेशयोग्यता
aria-labelledby="..."
मध्ये, मॉडेल शीर्षकाचा संदर्भ देऊन, जोडण्याची खात्री करा .modal
. aria-describedby
याव्यतिरिक्त, तुम्ही वर सह तुमच्या मोडल संवादाचे वर्णन देऊ शकता .modal
. लक्षात ठेवा की तुम्हाला जोडण्याची गरज नाही role="dialog"
कारण आम्ही ते आधीपासून JavaScript द्वारे जोडले आहे.
YouTube व्हिडिओ एम्बेड करत आहे
मोडल्समध्ये YouTube व्हिडिओ एम्बेड करण्यासाठी आपोआप प्लेबॅक आणि बरेच काही थांबवण्यासाठी बूटस्ट्रॅपमध्ये नसलेली अतिरिक्त JavaScript आवश्यक आहे. अधिक माहितीसाठी हे उपयुक्त स्टॅक ओव्हरफ्लो पोस्ट पहा .
पर्यायी आकार
मॉडेल्सचे तीन पर्यायी आकार आहेत, जे मॉडिफायर क्लासेसद्वारे उपलब्ध आहेत .modal-dialog
. अरुंद व्ह्यूपोर्टवर क्षैतिज स्क्रोलबार टाळण्यासाठी हे आकार विशिष्ट ब्रेकपॉइंट्सवर किक इन होतात.
आकार | वर्ग | मॉडेल कमाल-रुंदी |
---|---|---|
लहान | .modal-sm |
300px |
डीफॉल्ट | काहीही नाही | 500px |
मोठा | .modal-lg |
800px |
जास्त मोठं | .modal-xl |
1140px |
सुधारक वर्गाशिवाय आमचे डीफॉल्ट मॉडेल "मध्यम" आकाराचे मॉडेल बनवते.
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
वापर
मॉडेल प्लगइन डेटा विशेषता किंवा JavaScript द्वारे मागणीनुसार तुमची लपवलेली सामग्री टॉगल करते. हे डिफॉल्ट स्क्रोलिंग वर्तन ओव्हरराइड .modal-open
करण्यासाठी जोडते आणि मॉडेलच्या बाहेर क्लिक करताना दर्शविलेले मॉडेल डिसमिस करण्यासाठी क्लिक क्षेत्र प्रदान करते.<body>
.modal-backdrop
डेटा विशेषतांद्वारे
JavaScript न लिहिता एक मॉडेल सक्रिय करा. कंट्रोलर घटकावर सेट करा data-toggle="modal"
, जसे की बटणासह, data-target="#foo"
किंवा href="#foo"
टॉगल करण्यासाठी विशिष्ट मॉडेल लक्ष्य करण्यासाठी.
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
JavaScript द्वारे
myModal
JavaScript च्या एका ओळीसह id सह मॉडेल कॉल करा :
$('#myModal').modal(options)
पर्याय
डेटा विशेषता किंवा JavaScript द्वारे पर्याय पास केले जाऊ शकतात. डेटा विशेषतांसाठी, पर्यायाचे नाव , मध्ये data-
प्रमाणे जोडा data-backdrop=""
.
नाव | प्रकार | डीफॉल्ट | वर्णन |
---|---|---|---|
पार्श्वभूमी | बुलियन किंवा स्ट्रिंग'static' |
खरे | मॉडेल-बॅकड्रॉप घटक समाविष्ट करते. वैकल्पिकरित्या, static एका पार्श्वभूमीसाठी निर्दिष्ट करा जे क्लिकवर मॉडेल बंद करत नाही. |
कीबोर्ड | बुलियन | खरे | एस्केप की दाबल्यावर मॉडेल बंद करते |
लक्ष केंद्रित | बुलियन | खरे | प्रारंभ केल्यावर मॉडेलवर लक्ष केंद्रित करते. |
दाखवा | बुलियन | खरे | आरंभ केल्यावर मॉडेल दाखवते. |
पद्धती
असिंक्रोनस पद्धती आणि संक्रमणे
सर्व API पद्धती असिंक्रोनस आहेत आणि एक संक्रमण सुरू करतात . संक्रमण सुरू होताच परंतु ते संपण्यापूर्वी ते कॉलरकडे परत जातात . याव्यतिरिक्त, संक्रमण घटकावरील पद्धत कॉलकडे दुर्लक्ष केले जाईल .
.modal(options)
तुमची सामग्री मॉडेल म्हणून सक्रिय करते. पर्यायी पर्याय स्वीकारतो object
.
$('#myModal').modal({
keyboard: false
})
.modal('toggle')
मॅन्युअली एक मॉडेल टॉगल करते. मॉडेल प्रत्यक्षात दर्शविले किंवा लपविण्यापूर्वी (म्हणजे shown.bs.modal
किंवा hidden.bs.modal
घटना घडण्यापूर्वी) कॉलरकडे परत येते.
$('#myModal').modal('toggle')
.modal('show')
मॅन्युअली एक मॉडेल उघडते. मॉडेल प्रत्यक्षात दर्शविले जाण्यापूर्वी कॉलरकडे परत येते (म्हणजे shown.bs.modal
घटना घडण्यापूर्वी).
$('#myModal').modal('show')
.modal('hide')
मॅन्युअली एक मॉडेल लपवते. मॉडेल प्रत्यक्षात लपविण्याआधी कॉलरकडे परत येते (म्हणजे hidden.bs.modal
घटना घडण्यापूर्वी).
$('#myModal').modal('hide')
.modal('handleUpdate')
मॉडेल उघडे असताना त्याची उंची बदलल्यास (म्हणजे स्क्रोलबार दिसल्यास) मॉडेलची स्थिती व्यक्तिचलितपणे समायोजित करा.
$('#myModal').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 आणि कीबोर्ड पर्यायासह मॉडेलच्या बाहेर क्लिक किंवा एस्केप की दाबली जाते किंवा data-keyboard वर सेट केली जाते false . |
$('#myModal').on('hidden.bs.modal', function (event) {
// do something...
})