मोडल
लाइटबॉक्स, उपयोगकर्ता सूचना, या पूर्ण रूप सं कस्टम सामग्री कें लेल अपन साइट पर संवाद जोड़य कें लेल बूटस्ट्रैप कें जावास्क्रिप्ट मोडल प्लगइन कें उपयोग करूं.
कोना काज करैत अछि
बूटस्ट्रैप केरऽ मोडल घटक स॑ शुरू करै स॑ पहल॑ निम्नलिखित बात क॑ जरूर पढ़ी क॑ हमरऽ मेनू विकल्प हाल ही म॑ बदली गेलऽ छै ।
- मोडल एचटीएमएल, सीएसएस, आ जावास्क्रिप्ट के साथ बनायल गेल अछि | ई सब दस्तावेज म॑ बाकी सब कुछ प॑ स्थित छै आरू स्क्रॉल क॑ हटाबै छै
<body>
ताकि मोडल सामग्री एकरऽ बदला म॑ स्क्रॉल होय जाय । - मोडल “बैकग्राउंड” पर क्लिक करला पर मोडल स्वतः बंद भ जायत |
- बूटस्ट्रैप एक बेर मे केवल एकटा मोडल विंडो कें समर्थन करएयत छै. नेस्टेड मोडल समर्थित नै छै कियाकि हम ओकरा खराब उपयोगकर्ता अनुभव मानैत छी.
- मोडल उपयोग करैत
position: fixed
अछि , जे कखनो काल एकर रेंडरिंग के बारे में कनेक विशेष भ सकैत अछि. जखन संभव होयत, अपन मोडल एचटीएमएल कें शीर्ष-स्तरीय स्थिति मे राखू ताकि अन्य तत्वक सं संभावित हस्तक्षेप सं बचल जा सकय..modal
संभवतः अहाँ कोनो आन निश्चित तत्वक भीतर एकटा नेस्ट करबा काल समस्या मे पड़ब . - एक बेर फेर , के कारण
position: fixed
, मोबाइल डिवाइस पर मोडल के उपयोग के संग किछ चेतावनी अछि. विस्तार सँ जानकारी लेल हमर ब्राउज़र समर्थन डॉक्स देखू. - HTML5 अपनऽ शब्दार्थ क॑ कोना परिभाषित करै छै, एकरऽ कारण, HTML
autofocus
विशेषता केरऽ बूटस्ट्रैप मोडल म॑ कोनो प्रभाव नै पड़ै छै । समान प्रभाव प्राप्त करबाक लेल, किछु कस्टम जावास्क्रिप्ट क उपयोग करू:
$('#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>
भिन्न-भिन्न मोडल सामग्री
बटन के एकटा गुच्छा अछि जे सब किछु अलग सामग्री के संग एकहि मोडल के ट्रिगर करैत अछि? उपयोग event.relatedTarget
आरू HTML data-*
विशेषता (संभवतः jQuery के माध्यम स॑ ) मोडल केरऽ सामग्री म॑ बदलाव करै लेली ई आधार प॑ कि कोन बटन प॑ क्लिक करलऽ गेलऽ छेलै ।
नीचाँ लाइव डेमो अछि जकर बाद उदाहरण एचटीएमएल आ जावास्क्रिप्ट अछि । अधिक जानकारी क लेल, पर विस्तार स जानकारी क लेल मोडल इवेंट डॉक्स पढ़ू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
on केर संग द' सकैत छी .modal
. ध्यान रहे कि अहां के जोड़य के जरूरत नहिं अछि role="dialog"
किएक त हम पहिने सं जावास्क्रिप्ट के माध्यम सं जोड़ैत छी.
यूट्यूब वीडियो एम्बेड करब
यूट्यूब वीडियो क॑ मोडल म॑ एम्बेड करै लेली बूटस्ट्रैप म॑ नै हुअ॑ अतिरिक्त जावास्क्रिप्ट के जरूरत छै ताकि प्लेबैक क॑ स्वचालित रूप स॑ बंद करलऽ जाय सक॑ आरू बहुत कुछ । अधिक जानकारी के लेल ई सहायक स्टैक ओवरफ्लो पोस्ट देखू ।
वैकल्पिक आकार
मोडल कें तीन वैकल्पिक आकार छै, जे संशोधक वर्गक कें माध्यम सं उपलब्ध छै जे एकटा पर राखल जैतय .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>
प्रयोग
मोडल प्लगइन मांग पर, डाटा विशेषता या जावास्क्रिप्ट कें माध्यम सं, अहां कें छिपल सामग्री कें टॉगल करयत छै. .modal-open
इ डिफ़ॉल्ट स्क्रॉलिंग व्यवहार कें ओवरराइड करय कें लेल सेहो जोड़य छै आ मोडल कें बाहर क्लिक करय कें समय दिखायल गेलय मोडल कें खारिज करय कें लेल एकटा क्लिक क्षेत्र प्रदान करय कें लेल एकटा <body>
उत्पन्न करय छै..modal-backdrop
डेटा विशेषताओं के माध्यम से
जावास्क्रिप्ट लिखने बिना कोनो मोडल सक्रिय करू। एकटा नियंत्रक तत्व पर सेट करू data-toggle="modal"
, जेना एकटा बटन, एकटा data-target="#foo"
या href="#foo"
टॉगल करय कें लेल एकटा विशिष्ट मोडल कें लक्षित करय कें लेल.
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
जावास्क्रिप्ट के माध्यम से
myModal
जावास्क्रिप्ट के एकल लाइन के साथ id के साथ एक मोडल कॉल करें:
$('#myModal').modal(options)
विकल्प
विकल्पक कें डाटा एट्रिब्यूट या जावास्क्रिप्ट कें माध्यम सं पास कैल जा सकय छै. डेटा विशेषताक लेल, विकल्प नाम केँ data-
, मे संलग्न करू , जेना data-backdrop=""
.
नाम | प्रकार | चुकनाइ | वर्णन |
---|---|---|---|
पृष्ठभूमि | बूलियन या स्ट्रिंग'static' |
सत्य | एकटा मोडल-बैकग्राउंड तत्व शामिल अछि। वैकल्पिक रूप सँ, static एकटा एहन पृष्ठभूमि क लेल निर्दिष्ट करू जे क्लिक पर मोडल बंद नहि करैत अछि. |
कीबोर्ड | बूलियन | सत्य | एस्केप कुंजी दबाए पर मोडल बंद करैत अछि |
केन्द्रित | बूलियन | सत्य | आरंभ करबा काल मोडल पर फोकस राखैत अछि. |
प्रदर्शन | बूलियन | सत्य | आरंभ करबा पर मोडल देखाबैत अछि. |
विधियाँ
अतुल्यकालिक विधि एवं संक्रमण
सब एपीआई विधि एसिंक्रोनस अछि आ एकटा संक्रमण शुरू करैत अछि . संक्रमण शुरू होइते मुदा समाप्त होए सं पहिने फोन करय वाला के पास वापस आबि जाइत छथिन्ह . एकर अलावा, एकटा संक्रमण घटक पर एकटा विधि कॉल कें अनदेखी कैल जेतय .
.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 इंस्टेंस मेथड कें कॉल करय पर इ घटना तुरंत फायर भ जायत छै. यदि क्लिक के कारण छै, त क्लिक करलौ गेलौ तत्व relatedTarget घटना के गुण के रूप मँ उपलब्ध छै. |
देखाओल गेल.bs.modal | इ घटना तखन फायर कैल जायत छै जखन मोडल कें उपयोगकर्ता कें लेल दृश्यमान बना देल गेल छै (सीएसएस संक्रमण पूरा हुअ कें इंतजार करतय). यदि क्लिक के कारण छै, त क्लिक करलौ गेलौ तत्व relatedTarget घटना के गुण के रूप मँ उपलब्ध छै. |
छिपाएँ.बीएस.मोडल | ई घटना तुरंत फायर कएल जाइत अछि जखन hide इंस्टेंस मेथड कॉल कएल गेल अछि. |
छिपल.बीएस.मोडल | ई घटना तखन फायर कएल जाइत अछि जखन मोडल उपयोगकर्ता सँ नुकाएब समाप्त भ' जाइत अछि (सीएसएस संक्रमण पूरा होएबाक प्रतीक्षा करत)। |
hidePrevented.bs.modal के रूप मे | ई घटना तखन फायर कएल जाइत अछि जखन मोडल देखाओल जाइत अछि, ओकर बैकग्राउंड होइत अछि static आ मोडलसँ बाहर एकटा क्लिक वा एस्केप की प्रेस कीबोर्ड विकल्पक संग कएल जाइत अछि वा पर data-keyboard सेट कएल जाइत अछि false । |
$('#myModal').on('hidden.bs.modal', function (event) {
// do something...
})