मॉडल
लाइटबॉक्स, उपयोगकर्ता सूचनाएं, या पूरी तरह से कस्टम सामग्री के लिए अपनी साइट पर संवाद जोड़ने के लिए बूटस्ट्रैप के जावास्क्रिप्ट मोडल प्लगइन का उपयोग करें।
यह काम किस प्रकार करता है
बूटस्ट्रैप के मोडल घटक के साथ आरंभ करने से पहले, निम्नलिखित को पढ़ना सुनिश्चित करें क्योंकि हमारे मेनू विकल्प हाल ही में बदल गए हैं।
- मॉडल एचटीएमएल, सीएसएस और जावास्क्रिप्ट के साथ बनाए गए हैं। वे दस्तावेज़ में बाकी सब चीजों पर स्थित हैं और स्क्रॉल को हटा दें
<body>
ताकि इसके बजाय मोडल सामग्री स्क्रॉल हो। - मोडल "बैकड्रॉप" पर क्लिक करने से मोडल अपने आप बंद हो जाएगा।
- बूटस्ट्रैप एक समय में केवल एक मोडल विंडो का समर्थन करता है। नेस्टेड मोडल समर्थित नहीं हैं क्योंकि हम मानते हैं कि वे खराब उपयोगकर्ता अनुभव हैं।
- मॉडल उपयोग करते हैं
position: fixed
, जो कभी-कभी इसके प्रतिपादन के बारे में थोड़ा विशेष हो सकता है। जब भी संभव हो, अन्य तत्वों से संभावित हस्तक्षेप से बचने के लिए अपने मोडल HTML को शीर्ष-स्तरीय स्थिति में रखें।.modal
किसी अन्य निश्चित तत्व के भीतर घोंसला बनाते समय आप समस्याओं में भाग लेंगे । - एक बार फिर,
position: fixed
मोबाइल उपकरणों पर मोडल का उपयोग करने के साथ कुछ चेतावनी हैं। विवरण के लिए हमारे ब्राउज़र समर्थन दस्तावेज़ देखें। - HTML5 अपने शब्दार्थ को कैसे परिभाषित करता है, इसके कारण बूटस्ट्रैप मोडल में
autofocus
HTML विशेषता का कोई प्रभाव नहीं पड़ता है। समान प्रभाव प्राप्त करने के लिए, कुछ कस्टम JavaScript का उपयोग करें:
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myInput.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="btn-close" data-bs-dismiss="modal" aria-label="Close"></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-bs-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-bs-toggle="modal" data-bs-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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-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-bs-toggle="modal" data-bs-target="#staticBackdrop">
Launch static backdrop modal
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-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-bs-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 ms-auto">.col-md-4 .ms-auto</div>
</div>
<div class="row">
<div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
<div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
</div>
<div class="row">
<div class="col-md-6 ms-auto">.col-md-6 .ms-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 विशेषताओंevent.relatedTarget
का उपयोग करें ।data-bs-*
नीचे एक लाइव डेमो दिया गया है जिसके बाद HTML और JavaScript का उदाहरण दिया गया है। अधिक जानकारी के लिए, पर विवरण के लिए मोडल ईवेंट डॉक्स पढ़ेंrelatedTarget
।
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="mb-3">
<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-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
// Button that triggered the modal
var button = event.relatedTarget
// Extract info from data-bs-* attributes
var recipient = button.getAttribute('data-bs-whatever')
// If necessary, you could initiate an AJAX request here
// and then do the updating in a callback.
//
// Update the modal's content.
var modalTitle = exampleModal.querySelector('.modal-title')
var modalBodyInput = exampleModal.querySelector('.modal-body input')
modalTitle.textContent = 'New message to ' + recipient
modalBodyInput.value = recipient
})
मोडल्स के बीच टॉगल करें
data-bs-target
और data-bs-toggle
विशेषताओं के कुछ चतुर प्लेसमेंट के साथ कई मोडल के बीच टॉगल करें । उदाहरण के लिए, आप मोडल में पहले से खुले साइन के भीतर से पासवर्ड रीसेट मोडल को टॉगल कर सकते हैं। कृपया ध्यान दें कि एक से अधिक मोडल एक ही समय में नहीं खुल सकते हैं—यह विधि केवल दो अलग-अलग मोडल के बीच टॉगल करती है।
<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Show a second modal and hide this one with the button below.
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Open second modal</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Hide this modal and show the first with the button below.
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Back to first</button>
</div>
</div>
</div>
</div>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>
एनिमेशन बदलें
वेरिएबल मोडल फेड-इन एनीमेशन से पहले $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.handleUpdate()
स्क्रॉलबार दिखाई देने की स्थिति में मोडल की स्थिति को फिर से समायोजित करने के लिए कॉल करना चाहिए।
सरल उपयोग
aria-labelledby="..."
मोडल शीर्षक को संदर्भित करते हुए जोड़ना सुनिश्चित करें .modal
। aria-describedby
इसके अतिरिक्त, आप ऑन के साथ अपने मोडल डायलॉग का विवरण दे सकते हैं .modal
। ध्यान दें कि आपको जोड़ने की आवश्यकता नहीं है role="dialog"
क्योंकि हम इसे पहले ही जावास्क्रिप्ट के माध्यम से जोड़ चुके हैं।
YouTube वीडियो एम्बेड करना
YouTube वीडियो को मोडल में एम्बेड करने के लिए अतिरिक्त जावास्क्रिप्ट की आवश्यकता होती है, न कि बूटस्ट्रैप में स्वचालित रूप से प्लेबैक को रोकने के लिए और बहुत कुछ। अधिक जानकारी के लिए यह सहायक स्टैक ओवरफ़्लो पोस्ट देखें।
वैकल्पिक आकार
मॉडल में तीन वैकल्पिक आकार होते हैं, जो संशोधक वर्गों के माध्यम से उपलब्ध होते हैं जिन्हें एक .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-dialog
.
कक्षा | उपलब्धता |
---|---|
.modal-fullscreen |
हमेशा |
.modal-fullscreen-sm-down |
नीचे576px |
.modal-fullscreen-md-down |
नीचे768px |
.modal-fullscreen-lg-down |
नीचे992px |
.modal-fullscreen-xl-down |
नीचे1200px |
.modal-fullscreen-xxl-down |
नीचे1400px |
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
...
</div>
सास
चर
$modal-inner-padding: $spacer;
$modal-footer-margin-between: .5rem;
$modal-dialog-margin: .5rem;
$modal-dialog-margin-y-sm-up: 1.75rem;
$modal-title-line-height: $line-height-base;
$modal-content-color: null;
$modal-content-bg: $white;
$modal-content-border-color: rgba($black, .2);
$modal-content-border-width: $border-width;
$modal-content-border-radius: $border-radius-lg;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
$modal-content-box-shadow-xs: $box-shadow-sm;
$modal-content-box-shadow-sm-up: $box-shadow;
$modal-backdrop-bg: $black;
$modal-backdrop-opacity: .5;
$modal-header-border-color: $border-color;
$modal-footer-border-color: $modal-header-border-color;
$modal-header-border-width: $modal-content-border-width;
$modal-footer-border-width: $modal-header-border-width;
$modal-header-padding-y: $modal-inner-padding;
$modal-header-padding-x: $modal-inner-padding;
$modal-header-padding: $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility
$modal-sm: 300px;
$modal-md: 500px;
$modal-lg: 800px;
$modal-xl: 1140px;
$modal-fade-transform: translate(0, -50px);
$modal-show-transform: none;
$modal-transition: transform .3s ease-out;
$modal-scale-transform: scale(1.02);
फंदा
उत्तरदायी फ़ुलस्क्रीन मोडल$breakpoints
मानचित्र के माध्यम से उत्पन्न होते हैं और scss/_modal.scss
.
@each $breakpoint in map-keys($grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
$postfix: if($infix != "", $infix + "-down", "");
@include media-breakpoint-down($breakpoint) {
.modal-fullscreen#{$postfix} {
width: 100vw;
max-width: none;
height: 100%;
margin: 0;
.modal-content {
height: 100%;
border: 0;
@include border-radius(0);
}
.modal-header {
@include border-radius(0);
}
.modal-body {
overflow-y: auto;
}
.modal-footer {
@include border-radius(0);
}
}
}
}
प्रयोग
मोडल प्लगइन आपकी छिपी सामग्री को डेटा विशेषताओं या जावास्क्रिप्ट के माध्यम से मांग पर टॉगल करता है। .modal-backdrop
यह डिफ़ॉल्ट स्क्रॉलिंग व्यवहार को भी ओवरराइड करता है और मोडल के बाहर क्लिक करते समय दिखाए गए मोडल को खारिज करने के लिए एक क्लिक क्षेत्र प्रदान करने के लिए उत्पन्न करता है ।
डेटा विशेषताओं के माध्यम से
टॉगल
जावास्क्रिप्ट लिखे बिना एक मोडल सक्रिय करें। टॉगल करने के लिए एक विशिष्ट मोडल को लक्षित करने या लक्षित करने data-bs-toggle="modal"
के लिए एक बटन की तरह एक नियंत्रक तत्व पर सेट करें ।data-bs-target="#foo"
href="#foo"
<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>
नकार देना
जैसा कि नीचे दिखाया गया है, मोडल के भीतरdata
एक बटन पर विशेषता के साथ बर्खास्तगी हासिल की जा सकती है :
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
या नीचे दिखाए गए अनुसार मोडल के बाहर एक बटन पर :data-bs-target
<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
जावास्क्रिप्ट के माध्यम से
जावास्क्रिप्ट की एक पंक्ति के साथ एक मोडल बनाएँ:
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
विकल्प
विकल्प डेटा विशेषताओं या जावास्क्रिप्ट के माध्यम से पारित किए जा सकते हैं। डेटा विशेषताओं के लिए, विकल्प नाम को में जोड़ें data-bs-
, जैसा कि में है data-bs-backdrop=""
।
नाम | टाइप | चूक | विवरण |
---|---|---|---|
backdrop |
बूलियन या स्ट्रिंग'static' |
true |
एक मोडल-बैकड्रॉप तत्व शामिल है। वैकल्पिक रूप से, उस पृष्ठभूमि के लिए निर्दिष्ट करें static जो क्लिक पर मोडल को बंद नहीं करता है। |
keyboard |
बूलियन | true |
एस्केप कुंजी दबाए जाने पर मोडल बंद कर देता है |
focus |
बूलियन | true |
इनिशियलाइज़ होने पर मोडल पर फ़ोकस करता है। |
तरीकों
अतुल्यकालिक तरीके और संक्रमण
सभी एपीआई विधियाँ अतुल्यकालिक हैं और एक संक्रमण शुरू करती हैं । ट्रांज़िशन शुरू होते ही वे कॉलर के पास वापस आ जाते हैं लेकिन उसके समाप्त होने से पहले । इसके अलावा, एक संक्रमण घटक पर एक विधि कॉल को नजरअंदाज कर दिया जाएगा ।
पासिंग विकल्प
आपकी सामग्री को एक मोडल के रूप में सक्रिय करता है। एक वैकल्पिक विकल्प स्वीकार करता है object
।
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false
})
टॉगल
एक मोडल को मैन्युअल रूप से टॉगल करता है। मोडल को वास्तव में दिखाया या छुपाया गया है (यानी shown.bs.modal
या hidden.bs.modal
घटना होने से पहले) कॉलर पर वापस आ जाता है।
myModal.toggle()
प्रदर्शन
मैन्युअल रूप से एक मोडल खोलता है। मोडल वास्तव में दिखाया गया है (यानी shown.bs.modal
घटना होने से पहले) कॉलर को वापस लौटाता है।
myModal.show()
साथ ही, आप एक डीओएम तत्व को एक तर्क के रूप में पास कर सकते हैं जिसे मोडल ईवेंट ( relatedTarget
संपत्ति के रूप में) में प्राप्त किया जा सकता है।
var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)
छिपाना
मैन्युअल रूप से एक मोडल छुपाता है। मोडल वास्तव में छुपाया गया है (यानी hidden.bs.modal
घटना होने से पहले) कॉलर पर वापस आ जाता है।
myModal.hide()
हैंडलअपडेट
मोडल की स्थिति को मैन्युअल रूप से समायोजित करें यदि एक मोडल की ऊंचाई खुली होने पर बदलती है (यानी यदि स्क्रॉलबार दिखाई देता है)।
myModal.handleUpdate()
निपटाने
एक तत्व के मोडल को नष्ट कर देता है। (डीओएम तत्व पर संग्रहीत डेटा हटा देता है)
myModal.dispose()
दृष्टांत लो
स्टेटिक विधि जो आपको डीओएम तत्व से जुड़े मोडल इंस्टेंस को प्राप्त करने की अनुमति देती है
var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance
getOrCreateInstance
स्टेटिक विधि जो आपको DOM तत्व से जुड़े मोडल इंस्टेंस को प्राप्त करने की अनुमति देती है, या यदि इसे प्रारंभ नहीं किया गया था तो एक नया बनाएं
var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance
आयोजन
बूटस्ट्रैप का मोडल क्लास मोडल कार्यक्षमता में शामिल होने के लिए कुछ घटनाओं को उजागर करता है। सभी मोडल इवेंट्स को मोडल पर ही (यानी पर <div class="modal">
) निकाल दिया जाता है।
घटना प्रकार | विवरण |
---|---|
show.bs.modal |
show इंस्टेंस विधि को कॉल करने पर यह घटना तुरंत सक्रिय हो जाती है। यदि एक क्लिक के कारण होता है, तो क्लिक किया गया तत्व relatedTarget घटना की संपत्ति के रूप में उपलब्ध होता है। |
shown.bs.modal |
यह घटना तब सक्रिय हो जाती है जब मोडल को उपयोगकर्ता के लिए दृश्यमान बना दिया जाता है (सीएसएस संक्रमणों के पूरा होने की प्रतीक्षा करेगा)। यदि एक क्लिक के कारण होता है, तो क्लिक किया गया तत्व relatedTarget घटना की संपत्ति के रूप में उपलब्ध होता है। |
hide.bs.modal |
hide इंस्टेंस विधि को कॉल किए जाने पर इस घटना को तुरंत निकाल दिया जाता है। |
hidden.bs.modal |
इस घटना को निकाल दिया जाता है जब मोडल उपयोगकर्ता से छुपाया जा रहा है (सीएसएस संक्रमण पूरा होने की प्रतीक्षा करेगा)। |
hidePrevented.bs.modal |
यह घटना तब सक्रिय होती है जब मोडल दिखाया जाता है, इसकी पृष्ठभूमि होती है static और मोडल के बाहर एक क्लिक या एस्केप कुंजी प्रेस कीबोर्ड विकल्प के साथ किया जाता है या data-bs-keyboard पर सेट किया जाता है false । |
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
// do something...
})