मोडल
लाइटबॉक्स, उपयोगकर्ता सूचना, या पूर्ण रूप सं कस्टम सामग्री कें लेल अपन साइट पर संवाद जोड़य कें लेल बूटस्ट्रैप कें जावास्क्रिप्ट मोडल प्लगइन कें उपयोग करूं.
कोना काज करैत अछि
बूटस्ट्रैप केरऽ मोडल घटक स॑ शुरू करै स॑ पहल॑ निम्नलिखित बात क॑ जरूर पढ़ी क॑ हमरऽ मेनू विकल्प हाल ही म॑ बदली गेलऽ छै ।
- मोडल एचटीएमएल, सीएसएस, आ जावास्क्रिप्ट के साथ बनायल गेल अछि | ई सब दस्तावेज म॑ बाकी सब कुछ प॑ स्थित छै आरू स्क्रॉल क॑ हटाबै छै
<body>
ताकि मोडल सामग्री एकरऽ बदला म॑ स्क्रॉल होय जाय । - मोडल “बैकग्राउंड” पर क्लिक करला पर मोडल स्वतः बंद भ जायत |
- बूटस्ट्रैप एक बेर मे केवल एकटा मोडल विंडो कें समर्थन करएयत छै. नेस्टेड मोडल समर्थित नै छै कियाकि हम ओकरा खराब उपयोगकर्ता अनुभव मानैत छी.
- मोडल उपयोग करैत
position: fixed
अछि , जे कखनो काल एकर रेंडरिंग के बारे में कनेक विशेष भ सकैत अछि. जखन संभव होयत, अपन मोडल एचटीएमएल कें शीर्ष-स्तरीय स्थिति मे राखू ताकि अन्य तत्वक सं संभावित हस्तक्षेप सं बचल जा सकय..modal
संभवतः अहाँ कोनो आन निश्चित तत्वक भीतर एकटा नेस्ट करबा काल समस्या मे पड़ब . - एक बेर फेर , के कारण
position: fixed
, मोबाइल डिवाइस पर मोडल के उपयोग के संग किछ चेतावनी अछि. विस्तार सँ जानकारी लेल हमर ब्राउज़र समर्थन डॉक्स देखू. - HTML5 अपनऽ शब्दार्थ क॑ कोना परिभाषित करै छै, एकरऽ कारण, HTML
autofocus
विशेषता केरऽ बूटस्ट्रैप मोडल म॑ कोनो प्रभाव नै पड़ै छै । समान प्रभाव प्राप्त करबाक लेल, किछु कस्टम जावास्क्रिप्ट क उपयोग करू:
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>
भिन्न-भिन्न मोडल सामग्री
बटन के एकटा गुच्छा अछि जे सब किछु अलग सामग्री के संग एकहि मोडल के ट्रिगर करैत अछि? मोडल केरऽ सामग्री म॑ बदलाव करै लेली event.relatedTarget
आरू एचटीएमएल data-bs-*
विशेषता केरऽ उपयोग करऽ ई आधार प॑ कि कोन बटन प॑ क्लिक करलऽ गेलऽ छेलै ।
नीचाँ लाइव डेमो अछि जकर बाद उदाहरण एचटीएमएल आ जावास्क्रिप्ट अछि । अधिक जानकारी क लेल, पर विस्तार स जानकारी क लेल मोडल इवेंट डॉक्स पढ़ू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
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-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
मोडल कें बाहर क्लिक करय कें समय दिखायल गेल मोडल कें खारिज करय कें लेल एकटा क्लिक क्षेत्र प्रदान करय कें लेल a उत्पन्न करयत छै.
डेटा विशेषता के माध्यम से
टॉगल करब
जावास्क्रिप्ट लिखने बिना कोनो मोडल सक्रिय करू। एकटा नियंत्रक तत्व पर सेट करू 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()
साथ ही, आप एक DOM तत्व क॑ एक तर्क के रूप म॑ पास करी सकै छियै जे मोडल घटना म॑ ( relatedTarget
गुण के रूप म॑) प्राप्त करलऽ जाब॑ सकै छै ।
var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)
नुकाउ
मैन्युअल रूप स एकटा मोडल नुकाबैत अछि। मोडल कें वास्तव मे नुकाएय सं पहिले (अर्थात hidden.bs.modal
घटना घटित हुअ सं पहिले) कॉलर कें पास वापस आबि जायत छै.
myModal.hide()
handleUpdate करब
यदि कोनों मोडल कें खुलल रहला पर ओकर ऊंचाई बदलय छै (अर्थात स्क्रॉलबार दिखाय कें स्थिति मे) त मोडल कें स्थिति कें मैन्युअल रूप सं पुनः समायोजित करूं.
myModal.handleUpdate()
निपटान करब
कोनो तत्व के मोडल के नष्ट करैत अछि। (DOM तत्व पर संग्रहीत डेटा हटाबैत अछि)
myModal.dispose()
getInstance
स्थिर विधि जे अहां कें कोनों डोम तत्व सं जुड़ल मोडल इंस्टेंस प्राप्त करय कें अनुमति देयत छै
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...
})