मोडल
लाइटबॉक्स, बरतूनी सूचनाएं, जां पूरी चाल्ली कस्टम सामग्री आस्तै अपनी साइट पर संवाद जोड़ने आस्तै बूटस्ट्रैप दे जावास्क्रिप्ट मोडल प्लगइन दा इस्तेमाल करो.
किवें कम्म करदा है
बूटस्ट्रैप दे मोडल घटक कन्नै शुरू करने थमां पैह् ले, निम्नलिखित गी जरूर पढ़ो कीजे साढ़े मेनू विकल्प हाल च गै बदली गेदे न.
- मोडल एचटीएमएल, सीएसएस, ते जावास्क्रिप्ट कन्नै बने दे न। एह् दस्तावेज़ च बाकी हर इक चीज़ उप्पर तैह् त कीते गेदे न ते स्क्रॉल थमां स्क्रॉल हटांदे न
<body>
तां जे मोडल सामग्री इसदे बजाय स्क्रॉल होई सकै। - मोडल “बैकग्राउंड” पर क्लिक करने कन्नै मोडल अपने आप बंद होई जाग।
- बूटस्ट्रैप इक बारी च सिर्फ इक मोडल विंडो गी समर्थन करदा ऐ। नेस्टेड मोडल समर्थत नेईं ऐ की जे अस उ’नेंगी खराब बरतूनी अनुभव मनने आं।
- मोडल दा इस्तेमाल करदे न
position: fixed
, जेह् ड़ा कदें-कदें इसदे रेंडरिंग दे बारे च थोड़ा खास होई सकदा ऐ। जदूं बी होई सकै, अपने मोडल HTML गी शीर्शक-स्तरीय स्थिति च रक्खो तां जे दुए तत्वें थमां संभावित हस्तक्षेप थमां बचेआ जाई सकै..modal
संभावना ऐ जे तुस कुसै होर नियत तत्व दे अंदर इक नेस्ट करदे बेल्लै मुद्दें च दौड़गे . - इक बारी फी, , दे कारण
position: fixed
मोबाइल डिवाइस पर मोडल दा इस्तेमाल करने कन्नै किश चेतावनी ऐ। विस्तार लेई साढ़े ब्राउज़र समर्थन डॉक्स दिक्खो। - HTML5 अपने शब्दार्थ गी किस चाल्ली परिभाशत करदा ऐ इसदे कारण, HTML
autofocus
विशेषता दा बूटस्ट्रैप मोडल च कोई असर नेईं होंदा ऐ. उसी प्रभाव हासल करने आस्तै, कुसै कस्टम जावास्क्रिप्ट दा इस्तेमाल करो:
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('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="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</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-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-toggle="modal" data-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="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-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-toggle="modal" data-target="#staticBackdrop">
Launch static backdrop modal
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-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="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-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-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 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
<div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-6 ml-auto">.col-md-6 .ml-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-*
विशेषताएं दा इस्तेमाल करो (संभवत: jQuery दे राहें ) इस गल्लै पर निर्भर करदा ऐ जे किस बटन पर क्लिक कीता गेआ हा.
हेठ इक लाइव डेमो ऐ जिसदे बाद उदाहरण एचटीएमएल ते जावास्क्रिप्ट ऐ। होर मती जानकारी आस्तै, पर विस्तार आस्तै मोडल इवेंट डॉक्स पढ़ोrelatedTarget
.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-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="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<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-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
एनीमेशन बदलें
चर मोडल फेड-इन एनीमेशन थमां पैह् ले $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').modal('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-open
करदा ऐ .<body>
.modal-backdrop
डेटा विशेषताएं दे माध्यम कन्नै
जावास्क्रिप्ट लिखने दे बगैर इक मोडल सक्रिय करो। इक नियंत्रक तत्व पर सेट करो data-toggle="modal"
, जि’यां इक बटन, इक data-target="#foo"
जां href="#foo"
टॉगल करने आस्तै इक विशिष्ट मोडल गी निशाना बनाने आस्तै.
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
जावास्क्रिप्ट दे जरिए
myModal
जावास्क्रिप्ट दी इक लाइन कन्नै आईडी कन्नै इक मोडल गी कॉल करो :
$('#myModal').modal(options)
विकल्प ऐ
विकल्पें गी डेटा एट्रिब्यूट जां जावास्क्रिप्ट दे राहें पास कीता जाई सकदा ऐ। डेटा विशेषताएं आस्तै, विकल्प नांऽ गी data-
, च जोड़ो , जिऱयां data-backdrop=""
.
नां | किसम | डिफाल्ट | ब्यौरा |
---|---|---|---|
पृष्ठभूमि दा | बूलियन या स्ट्रिंग दा'static' |
सच्च | इक मोडल-बैकग्राउंड तत्व शामल ऐ। वैकल्पिक रूप कन्नै, static इक बैकग्राउंड आस्तै निर्दिश्ट करो जेह् ड़ी क्लिक पर मोडल गी बंद नेईं करदी ऐ. |
कीबोर्ड दा | बूलियन | सच्च | एस्केप कुंजी दबाने पर मोडल बंद करदा ऐ |
ध्यान देना | बूलियन | सच्च | इनिशियलाइज होने पर मोडल पर ध्यान दिंदा ऐ। |
शो | बूलियन | सच्च | आरंभ करने पर मोडल दस्सदा ऐ। |
विधियां
एसिंक्रोनस तरीके ते संक्रमण
सारे एपीआई तरीके एसिंक्रोनस न ते इक संक्रमण शुरू करदे न . संक्रमण शुरू होने दे बाद गै ओह् काल करने आह् ले कोल वापस औंदे न पर खत्म होने थमां पैह् ले . इसदे अलावा, इक संक्रमण घटक पर इक विधि काल गी अनदेखा कीता जाग .
होर मती जानकारी आस्तै साढ़े जावास्क्रिप्ट दस्तावेज़ीकरण दिक्खो .
.modal(options)
तुंदी सामग्री गी मोडल दे रूप च सक्रिय करदा ऐ। इक वैकल्पिक विकल्प स्वीकार करदा ऐ object
.
$('#myModal').modal({
keyboard: false
})
.modal('toggle')
मैन्युअल रूप कन्नै इक मोडल टॉगल करदा ऐ। मोडल गी असल च दस्सने जां छिपाने थमां पैह् ले (यानी shown.bs.modal
जां hidden.bs.modal
घटना होने थमां पैह् ले) कॉलर गी वापस करदा ऐ।
$('#myModal').modal('toggle')
.modal('show')
मैन्युअल रूप कन्नै इक मोडल खोह् लदा ऐ। मोडल गी असल च दस्से जाने थमां पैह् ले (यानी shown.bs.modal
घटना होने थमां पैह् ले) कॉलर गी वापस करदा ऐ।
$('#myModal').modal('show')
.modal('hide')
मैन्युअल रूप कन्नै इक मोडल छिपांदा ऐ। मोडल गी असल च छिपाने थमां पैह् ले (यानी hidden.bs.modal
घटना होने थमां पैह् ले) कॉलर गी वापस करदा ऐ।
$('#myModal').modal('hide')
.modal('handleUpdate')
जेकर कुसै मोडल दी ऊंचाई खुल्ली होने पर बदलदी ऐ (यानी स्क्रॉलबार दिक्खने दी स्थिति च) तां मोडल दी स्थिति गी मैन्युअल रूप कन्नै दुबारा समायोजित करो।
$('#myModal').modal('handleUpdate')
.modal('dispose')
इक तत्व दा मोडल नष्ट करदा ऐ।
घटनाएं
बूटस्ट्रैप दा मोडल वर्ग मोडल कार्यक्षमता च हुक करने आस्तै किश घटनाएं गी उजागर करदा ऐ। सारे मोडल घटनाएं गी मोडल पर गै (यानी पर <div class="modal">
) फायर कीता जंदा ऐ ।
घटना दा प्रकार | ब्यौरा |
---|---|
शो।बीएस.मोडल | show इंस्टेंस विधि गी बुलाने पर एह् घटना तुरत फायर होई जंदी ऐ। जेकर कुसै क्लिक दे कारण ऐ तां क्लिक कीता गेदा तत्व relatedTarget घटना दी संपत्ति दे रूप च उपलब्ध ऐ. |
दिखाया।बीएस.मोडल | एह् घटना उस बेल्लै फायर कीती जंदी ऐ जिसलै मोडल गी बरतूनी गी दिक्खने आह् ला बनाया गेआ ऐ (सीएसएस संक्रमणें गी पूरा होने दा इंतजार करग)। जेकर कुसै क्लिक दे कारण ऐ तां क्लिक कीता गेदा तत्व relatedTarget घटना दी संपत्ति दे रूप च उपलब्ध ऐ. |
छिपाओ।बीएस.मोडल | इस घटना गी फौरन फायर कीता जंदा ऐ जिसलै hide इंस्टेंस विधि गी बुलाया गेआ ऐ. |
छिपे दा.बी.एस.मोडल | एह् घटना उस बेल्लै फायर कीती जंदी ऐ जिसलै मोडल बरतूनी थमां छिपाना समाप्त होई जंदा ऐ (सीएसएस संक्रमणें गी पूरा होने दा इंतजार करग)। |
hidePrevented.bs.modal ऐ | एह् घटना उस बेल्लै फायर कीती जंदी ऐ जिसलै मोडल दस्सेआ जंदा ऐ, इसदी बैकग्राउंड ऐ static ते मोडल दे बाहर इक क्लिक जां इक एस्केप कुंजी दबाना कीबोर्ड विकल्प कन्नै कीता जंदा ऐ data-keyboard जां false . |
$('#myModal').on('hidden.bs.modal', function (event) {
// do something...
})