मोडल
लाइटबॉक्सेस, वापरकर्ता सूचना किंवा पूर्णपणे सानुकूल सामग्रीसाठी आपल्या साइटवर संवाद जोडण्यासाठी बूटस्ट्रॅपचे JavaScript मॉडेल प्लगइन वापरा.
हे कसे कार्य करते
बूटस्ट्रॅपच्या मॉडेल घटकासह प्रारंभ करण्यापूर्वी, आमचे मेनू पर्याय नुकतेच बदलले असल्याने खालील वाचा याची खात्री करा.
- मॉडेल HTML, CSS आणि JavaScript सह तयार केले जातात. ते दस्तऐवजातील इतर सर्व गोष्टींवर स्थित आहेत आणि
<body>
त्याऐवजी मॉडेल सामग्री स्क्रोल करण्यासाठी वरून स्क्रोल काढा. - मॉडेल "पार्श्वभूमी" वर क्लिक केल्याने मॉडेल आपोआप बंद होईल.
- बूटस्ट्रॅप एका वेळी फक्त एका मॉडेल विंडोला समर्थन देतो. नेस्टेड मॉडेल समर्थित नाहीत कारण ते खराब वापरकर्ता अनुभव आहेत असे आम्हाला वाटते.
- मॉडेल वापरतात
position: fixed
, जे काहीवेळा त्याच्या प्रस्तुतीकरणाबद्दल थोडेसे विशिष्ट असू शकतात. जेव्हा शक्य असेल तेव्हा, इतर घटकांकडून संभाव्य हस्तक्षेप टाळण्यासाठी तुमचे मॉडेल एचटीएमएल उच्च-स्तरीय स्थितीत ठेवा..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>
भिन्न मॉडेल सामग्री
थोड्या वेगळ्या सामग्रीसह सर्व समान मॉडेल ट्रिगर करणार्या बटणांचा समूह आहे? कोणत्या बटणावर क्लिक केले आहे त्यानुसार मॉडेलमधील सामग्री बदलण्यासाठी वापरा event.relatedTarget
आणि HTML 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"
कारण आम्ही ते आधीपासून 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>
फुलस्क्रीन मॉडेल
आणखी एक ओव्हरराइड म्हणजे वापरकर्ता व्ह्यूपोर्ट कव्हर करणारे मॉडेल पॉप अप करण्याचा पर्याय आहे, जे मॉडिफायर क्लासेसद्वारे उपलब्ध आहे जे .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);
}
}
}
}
वापर
मॉडेल प्लगइन डेटा विशेषता किंवा JavaScript द्वारे मागणीनुसार तुमची लपवलेली सामग्री टॉगल करते. हे डीफॉल्ट स्क्रोलिंग वर्तन देखील ओव्हरराइड करते आणि .modal-backdrop
मॉडेलच्या बाहेर क्लिक करताना दर्शविलेले मॉडेल डिसमिस करण्यासाठी क्लिक क्षेत्र प्रदान करते.
डेटा विशेषतांद्वारे
टॉगल करा
JavaScript न लिहिता एक मॉडेल सक्रिय करा. कंट्रोलर घटकावर सेट करा 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>
JavaScript द्वारे
JavaScript च्या एका ओळीसह एक मॉडेल तयार करा:
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
पर्याय
डेटा विशेषता किंवा JavaScript द्वारे पर्याय पास केले जाऊ शकतात. डेटा विशेषतांसाठी, पर्यायाचे नाव , मध्ये data-bs-
प्रमाणे जोडा data-bs-backdrop=""
.
नाव | प्रकार | डीफॉल्ट | वर्णन |
---|---|---|---|
backdrop |
बुलियन किंवा स्ट्रिंग'static' |
true |
मॉडेल-बॅकड्रॉप घटक समाविष्ट करते. वैकल्पिकरित्या, static एका पार्श्वभूमीसाठी निर्दिष्ट करा जे क्लिकवर मॉडेल बंद करत नाही. |
keyboard |
बुलियन | true |
एस्केप की दाबल्यावर मॉडेल बंद करते |
focus |
बुलियन | true |
प्रारंभ केल्यावर मॉडेलवर लक्ष केंद्रित करते. |
पद्धती
असिंक्रोनस पद्धती आणि संक्रमणे
सर्व API पद्धती असिंक्रोनस आहेत आणि एक संक्रमण सुरू करतात . संक्रमण सुरू होताच परंतु ते संपण्यापूर्वी ते कॉलरकडे परत जातात . याव्यतिरिक्त, संक्रमण घटकावरील पद्धत कॉलकडे दुर्लक्ष केले जाईल .
पासिंग पर्याय
तुमची सामग्री मॉडेल म्हणून सक्रिय करते. पर्यायी पर्याय स्वीकारतो 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()
हँडल अपडेट
मॉडेल उघडे असताना त्याची उंची बदलल्यास (म्हणजे स्क्रोलबार दिसल्यास) मॉडेलची स्थिती व्यक्तिचलितपणे समायोजित करा.
myModal.handleUpdate()
विल्हेवाट लावणे
घटकाचे मॉडेल नष्ट करते. (DOM घटकावरील संचयित डेटा काढून टाकते)
myModal.dispose()
getInstance
स्टॅटिक पद्धत जी तुम्हाला डीओएम घटकाशी संबंधित मॉडेल इन्स्टन्स मिळवू देते
var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance
getOrCreateInstance
स्टॅटिक पद्धत जी तुम्हाला डीओएम घटकाशी संबंधित मॉडेल इन्स्टन्स मिळवू देते किंवा ते सुरू न झाल्यास नवीन तयार करू देते
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 |
जेव्हा मॉडेल वापरकर्त्यासाठी दृश्यमान केले जाते तेव्हा हा कार्यक्रम काढला जातो (CSS संक्रमण पूर्ण होण्याची प्रतीक्षा करेल). क्लिकमुळे झाले असल्यास, क्लिक केलेला घटक relatedTarget इव्हेंटची मालमत्ता म्हणून उपलब्ध असतो. |
hide.bs.modal |
hide जेव्हा उदाहरण पद्धत कॉल केली जाते तेव्हा हा इव्हेंट लगेच काढला जातो . |
hidden.bs.modal |
जेव्हा मॉडेल वापरकर्त्यापासून लपविले जाणे पूर्ण केले जाते तेव्हा हा कार्यक्रम काढला जातो (CSS संक्रमण पूर्ण होण्याची प्रतीक्षा करेल). |
hidePrevented.bs.modal |
जेव्हा मॉडेल दाखवले जाते, त्याची पार्श्वभूमी असते तेव्हा हा कार्यक्रम काढला जातो static आणि कीबोर्ड पर्यायासह मॉडेलच्या बाहेर क्लिक किंवा एस्केप की दाबली जाते किंवा data-bs-keyboard वर सेट केली जाते false . |
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
// do something...
})