मोडल
लाइटबॉक्स, बरतूनी सूचनाएं, जां पूरी चाल्ली कस्टम सामग्री आस्तै अपनी साइट पर संवाद जोड़ने आस्तै बूटस्ट्रैप दे जावास्क्रिप्ट मोडल प्लगइन दा इस्तेमाल करो.
किवें कम्म करदा है
बूटस्ट्रैप दे मोडल घटक कन्नै शुरू करने थमां पैह् ले, निम्नलिखित गी जरूर पढ़ो कीजे साढ़े मेनू विकल्प हाल च गै बदली गेदे न.
- मोडल एचटीएमएल, सीएसएस, ते जावास्क्रिप्ट कन्नै बने दे न। एह् दस्तावेज़ च बाकी हर इक चीज़ उप्पर तैह् त कीते गेदे न ते स्क्रॉल थमां स्क्रॉल हटांदे न
<body>
तां जे मोडल सामग्री इसदे बजाय स्क्रॉल होई सकै। - मोडल “बैकग्राउंड” पर क्लिक करने कन्नै मोडल अपने आप बंद होई जाग।
- बूटस्ट्रैप इक बारी च सिर्फ इक मोडल विंडो गी समर्थन करदा ऐ। नेस्टेड मोडल समर्थत नेईं ऐ की जे अस उ’नेंगी खराब बरतूनी अनुभव मनने आं।
- मोडल दा इस्तेमाल करदे न
position: fixed
, जेह् ड़ा कदें-कदें इसदे रेंडरिंग दे बारे च थोड़ा खास होई सकदा ऐ। जदूं बी होई सकै, अपने मोडल HTML गी शीर्शक-स्तरीय स्थिति च रक्खो तां जे दुए तत्वें थमां संभावित हस्तक्षेप थमां बचेआ जाई सकै..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
HTML गुणें 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" 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
जेकर तुस उदाहरन दे तौर पर इक ज़ूम-इन एनीमेशन चांह् दे ओ तां तुस सेट करी सकदे ओ $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
मोडल दे बाहर क्लिक करदे बेल्लै दस्से गेदे मोडल गी खारिज करने आस्तै इक क्लिक क्षेत्र उपलब्ध करोआने आस्तै इक पैदा करदा ऐ.
डेटा विशेषताएं दे माध्यम कन्नै
जावास्क्रिप्ट लिखने दे बगैर इक मोडल सक्रिय करो। इक नियंत्रक तत्व पर सेट करो 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-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()
संभालनाअपडेट करना
जेकर कुसै मोडल दी ऊंचाई खुल्ली होने पर बदलदी ऐ (यानी स्क्रॉलबार दिक्खने दी स्थिति च) तां मोडल दी स्थिति गी मैन्युअल रूप कन्नै दुबारा समायोजित करो।
myModal.handleUpdate()
निपटान करना
इक तत्व दा मोडल नष्ट करदा ऐ। (डीओएम तत्व पर संग्रहीत डेटा गी हटांदा ऐ)
myModal.dispose()
getInstance दा
स्थिर विधि जेह् ड़ी तुसेंगी इक DOM तत्व कन्नै जुड़े दा मोडल इंस्टेंस हासल करने दी इजाजत दिंदी ऐ
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...
})