मोडल
प्रकाशपेटिकाः, उपयोक्तृसूचनाः, अथवा पूर्णतया अनुकूलितसामग्रीणां कृते स्वसाइट् मध्ये संवादं योजयितुं Bootstrap इत्यस्य JavaScript मोडल् प्लगिन् उपयुज्यताम् ।
कथं कार्यं करोति
Bootstrap इत्यस्य modal घटकेन सह आरम्भात् पूर्वं निम्नलिखितम् अवश्यं पठन्तु यतः अस्माकं मेनू विकल्पाः अद्यतने परिवर्तिताः सन्ति ।
- मोडल्स् HTML, CSS, JavaScript इत्यनेन सह निर्मिताः सन्ति । ते दस्तावेजे अन्यत् सर्वं उपरि स्थिताः सन्ति तथा च स्क्रॉलं निष्कासयन्ति
<body>
येन मोडल सामग्री तस्य स्थाने स्क्रॉलं करोति। - मोडल् “backdrop” इत्यत्र क्लिक् कृत्वा स्वयमेव मोडल् बन्दं भविष्यति ।
- बूटस्ट्रैप् एकस्मिन् समये केवलं एकं मोडल् विण्डो समर्थयति । नेस्टेड् मोडाल्स् समर्थिताः न सन्ति यतः वयं तान् दुर्बलाः उपयोक्तृअनुभवाः इति मन्यामहे।
- Modals use
position: fixed
, यत् कदाचित् तस्य प्रतिपादनस्य विषये किञ्चित् विशेषं भवितुम् अर्हति । यदा यदा सम्भवं भवति तदा अन्येभ्यः तत्त्वेभ्यः सम्भाव्यहस्तक्षेपं परिहरितुं स्वस्य मोडल HTML शीर्षस्तरीयस्थाने स्थापयन्तु ।.modal
अन्यस्य नियततत्त्वस्य अन्तः एकं नेस्ट् कृत्वा भवन्तः सम्भवतः समस्यासु धावन्ति । - पुनः, कारणतः
position: fixed
, चलयन्त्रेषु मोडालस्य उपयोगेन सह केचन चेतावनीः सन्ति । विस्तरेण ज्ञातुं अस्माकं ब्राउज़र समर्थन डॉक्स पश्यन्तु। - HTML5 इत्यनेन स्वस्य शब्दार्थं कथं परिभाषयति इति कारणतः Bootstrap modals इत्यत्र
autofocus
HTML विशेषतायाः कोऽपि प्रभावः नास्ति । समानं प्रभावं प्राप्तुं, किञ्चित् कस्टम् जावास्क्रिप्ट् उपयुज्यताम् :
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})
prefers-reduced-motion
मीडिया-प्रश्नस्य उपरि निर्भरः भवति । अस्माकं सुलभतादस्तावेजस्य न्यूनीकृतगतिविभागं पश्यन्तु
.
डेमो तथा उपयोग मार्गदर्शिकाओं के लिए पढ़ते रहें।
उदाहरणानि
मोडल घटक
अधः स्थिरं मोडल उदाहरणम् (अर्थात् its position
and display
have been overridden) अस्ति । अत्र मोडल हेडर, मोडल बॉडी (required for 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>
स्थिर पृष्ठभूमि
यदा backdrop static इति सेट् भवति तदा तस्य बहिः क्लिक् करणसमये modal न बन्दं भविष्यति । तस्य प्रयोगार्थं अधोलिखितं बटनं नुदन्तु ।
<!-- 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
लिए to जोड़ें ।.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>
जालस्य उपयोगेन
अन्तः नेस्टिंग् कृत्वा एकस्य मोडलस्य अन्तः Bootstrap जालप्रणाल्याः उपयोगं .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 अस्ति। अधिकविवरणार्थं, विषये विवरणार्थं modal events docs पठन्तु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
the and data-bs-toggle
विशेषतानां किञ्चित् चतुरं स्थापनेन सह बहुविधमोडलयोः मध्ये टॉगलं कुर्वन्तु । यथा, भवान् पूर्वमेव उद्घाटितस्य sign in modal इत्यस्य अन्तःतः password reset modal इत्येतत् 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" data-bs-dismiss="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" data-bs-dismiss="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
यदि भवान् उदाहरणार्थं zoom-in animation इच्छति तर्हि भवान् $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"
यतः वयं पूर्वमेव जावास्क्रिप्ट् मार्गेण योजयामः ।
यूट्यूब विडियो एम्बेड करना
यूट्यूब-वीडियो-इत्येतत् मोडल्-मध्ये एम्बेड्-करणार्थं स्वयमेव प्लेबैक्-स्थगितुं Bootstrap-मध्ये न अतिरिक्त-जावास्क्रिप्ट्-इत्यस्य आवश्यकता वर्तते । अधिकसूचनार्थं एतत् सहायकं Stack Overflow पोस्ट पश्यन्तु।
वैकल्पिक आकार
मोडल्स् मध्ये त्रयः वैकल्पिकाः आकाराः सन्ति, ये एकस्मिन् स्थापनार्थं परिवर्तकवर्गाणां माध्यमेन उपलभ्यन्ते .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>
जावास्क्रिप्ट् मार्गेण
जावास्क्रिप्ट् इत्यस्य एकया पङ्क्तिना सह मोडल् रचयन्तु:
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
विकल्पाः
विकल्पाः data attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते । दत्तांशविशेषतानां कृते, विकल्पनाम , इत्यत्र data-bs-
योजयन्तु data-bs-backdrop=""
।
नामः | प्रकारः | मूलभूतम् | वर्णनम् |
---|---|---|---|
backdrop |
बूलेन वा तारः'static' |
true |
एकं मोडल-पृष्ठभूमितत्त्वं समावेशयति। वैकल्पिकरूपेण, static एकस्य पृष्ठभूमिस्य कृते निर्दिशतु यत् क्लिक् इत्यत्र मोडल् न बन्दं करोति । |
keyboard |
बूलियन इति | true |
escape कील दबाने पर मोडल बन्द करता है |
focus |
बूलियन इति | true |
आरम्भे मोडल इत्यत्र ध्यानं स्थापयति । |
विधियाँ
अतुल्यकालिक विधियाँ एवं संक्रमण
सर्वे एपिआइ विधिः अतुल्यकालिकः भवति तथा च संक्रमणं आरभते | ते संक्रमणस्य आरम्भमात्रेण परन्तु तस्य समाप्तेः पूर्वं आह्वानकर्तु��� समीपं आगच्छन्ति | तदतिरिक्तं, संक्रमणघटकस्य उपरि एकः विधि-आह्वानः अवहेलितः भविष्यति .
पासिंग विकल्प
भवतः सामग्रीं मोडलरूपेण सक्रियं करोति। एकं वैकल्पिकं विकल्पं स्वीकुर्वति object
.
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false
})
toggle इति
एकं मोडलं मैन्युअल् रूपेण टॉगल करोति। मोडलस्य वास्तविकरूपेण दर्शितस्य वा गोपनीयस्य वा पूर्वं (अर्थात् shown.bs.modal
or 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 इति
स्थिरविधिः या भवन्तं DOM तत्वेन सह सम्बद्धं मोडल उदाहरणं प्राप्तुं शक्नोति
var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance
getOrCreateइन्स्टेंस इति
स्थिरविधिः या भवन्तं 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 |
इदं घटना तदा प्रज्वलितं भवति यदा मोडल् उपयोक्त्रे दृश्यमानं कृतम् अस्ति (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...
})