लाइटबॉक्स, बरतूनी सूचनाएं, जां पूरी चाल्ली कस्टम सामग्री आस्तै अपनी साइट पर संवाद जोड़ने आस्तै बूटस्ट्रैप दे जावास्क्रिप्ट मोडल प्लगइन दा इस्तेमाल करो.
किवें कम्म करदा है
बूटस्ट्रैप दे मोडल घटक कन्नै शुरू करने थमां पैह् ले, निम्नलिखित गी जरूर पढ़ो कीजे साढ़े मेनू विकल्प हाल च गै बदली गेदे न.
मोडल एचटीएमएल, सीएसएस, ते जावास्क्रिप्ट कन्नै बने दे न। एह् दस्तावेज़ च बाकी हर इक चीज़ उप्पर तैह् त कीते गेदे न ते स्क्रॉल थमां स्क्रॉल हटांदे न <body>तां जे मोडल सामग्री इसदे बजाय स्क्रॉल होई सकै।
मोडल “बैकग्राउंड” पर क्लिक करने कन्नै मोडल अपने आप बंद होई जाग।
बूटस्ट्रैप इक बारी च सिर्फ इक मोडल विंडो गी समर्थन करदा ऐ। नेस्टेड मोडल समर्थत नेईं ऐ की जे अस उ’नेंगी खराब बरतूनी अनुभव मनने आं।
मोडल दा इस्तेमाल करदे न position: fixed, जेह् ड़ा कदें-कदें इसदे रेंडरिंग दे बारे च थोड़ा खास होई सकदा ऐ। जदूं बी होई सकै, अपने मोडल HTML गी शीर्शक-स्तरीय स्थिति च रक्खो तां जे दुए तत्वें थमां संभावित हस्तक्षेप थमां बचेआ जाई सकै. .modalसंभावना ऐ जे तुस कुसै होर नियत तत्व दे अंदर इक नेस्ट करदे बेल्लै मुद्दें च दौड़गे .
HTML5 अपने शब्दार्थ गी किस चाल्ली परिभाशत करदा ऐ इसदे कारण, HTML autofocusविशेषता दा बूटस्ट्रैप मोडल च कोई प्रभाव नेईं होंदा ऐ. उसी प्रभाव हासल करने आस्तै, कुसै कस्टम जावास्क्रिप्ट दा इस्तेमाल करो:
निचले बटन पर क्लिक करियै इक कम्म करने आह् ले मोडल डेमो गी टॉगल करो। एह् थल्ले सरकग ते पृष्ठ दे शीर्शक थमां अंदर फीका होई जाग।
Modal title
Woohoo, you're reading this text in a modal!
स्थिर पृष्ठभूमि
जदूं बैकग्राउंड गी स्थिर पर सेट कीता जंदा ऐ तां इसदे बाह् र क्लिक करने पर मोडल बंद नेईं होग. इसगी अजमाने लेई थल्ले दित्ते गेदे बटन पर क्लिक करो।
Modal title
I will not close if you click outside me. Don't even try to press escape key.
लंबी सामग्री स्क्रॉल करना
जदूं मोडल बरतूनी दे व्यूपोर्ट जां डिवाइस आस्तै मते लम्मे होई जंदे न तां ओह् पृष्ठ थमां गै स्वतंत्र रूप कन्नै स्क्रॉल करदे न। साढ़ा मतलब केह् ऐ, एह् दिक्खने लेई थल्ले दित्ते गेदे डेमो गी आज़माइयै दिक्खो।
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
तुस इक स्क्रॉल करने योग्य मोडल बी बनाई सकदे ओ जेह् ड़ा मोडल बॉडी गी स्क्रॉल करने दी इजाजत दिंदा .modal-dialog-scrollableऐ .modal-dialog.
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
लंबवत केन्द्रित
मोडल गी लंबवत केंद्र .modal-dialog-centeredकरने आस्तै च जोड़ो ।.modal-dialog
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
टूलटिप्स ते पोपोवर
टूलटिप्स ते पोपोवर गी जरूरत मताबक मोडल दे अंदर रक्खेआ जाई सकदा ऐ। जदूं मोडल बंद होंदे न तां अंदर कुसै बी टूलटिप ते पोपोवर गी बी अपने आप गै खारिज करी दित्ता जंदा ऐ।
हेठ इक लाइव डेमो ऐ जिसदे बाद उदाहरण एचटीएमएल ते जावास्क्रिप्ट ऐ। होर मती जानकारी आस्तै, पर विस्तार आस्तै मोडल इवेंट डॉक्स पढ़ोrelatedTarget .
New message
एनीमेशन बदलें
चर मोडल फेड-इन एनीमेशन थमां पैह् ले $modal-fade-transformदी रूपांतरण स्थिति निर्धारत करदा ऐ , चर मोडल फेड-इन एनीमेशन दे अंत च दी रूपांतरण निर्धारत करदा ऐ ।.modal-dialog$modal-show-transform.modal-dialog
जेकर तुस उदाहरन दे तौर पर इक ज़ूम-इन एनीमेशन चांह् दे ओ तां तुस सेट करी सकदे ओ $modal-fade-transform: scale(.8).
एनीमेशन हटाओ
मोडल आस्तै जेह् ड़े बस दिक्खने आस्तै फीके होने दे बजाय दिक्खने गी मिलदे न , .fadeअपने मोडल मार्कअप थमां वर्ग गी हटाओ.
गतिशील ऊंचाई
जेकर कुसै मोडल दी ऊंचाई खुल्ली होने पर बदली जंदी ऐ तां तुसेंगी $('#myModal').modal('handleUpdate')स्क्रॉलबार दिक्खने दी स्थिति च मोडल दी स्थिति गी दुबारा समायोजित करने आस्तै फोन करना चाहिदा ऐ.
सुलभता दा
aria-labelledby="..."मोडल शीर्षक दा संदर्भ दिंदे होई , गी ज़रूर जोड़ो .modal. इसदे अलावा, तुस अपने मोडल संवाद दा वर्णन aria-describedbyon कन्नै देई सकदे ओ .modal. ध्यान रक्खो जे तुसेंगी जोड़ने दी लोड़ नेईं ऐ role="dialog"की जे अस पैह् ले थमां गै जावास्क्रिप्ट दे राहें जोड़ने आं।
यूट्यूब वीडियो एम्बेड करना
मोडल च यूट्यूब वीडियो गी एम्बेड करने लेई बूटस्ट्रैप च नेईं होने आह् ली अतिरिक्त जावास्क्रिप्ट दी लोड़ ऐ तां जे प्लेबैक गी स्वतः बंद कीता जाई सकै ते होर मते सारे। होर मती जानकारी आस्तै एह् मददगार स्टैक ओवरफ्लो पोस्ट दिक्खो।
वैकल्पिक आकार दे
मोडल च त्रै वैकल्पिक आकार होंदे न, जेह् ड़े संशोधक वर्गें दे राहें उपलब्ध न जेह् ड़े इक .modal-dialog. संकीर्ण व्यूपोर्टें पर क्षैतिज स्क्रॉलबार थमां बचने आस्तै एह् आकार किश ब्रेकपॉइंटें पर किक करदे न।
साइज
जमात
मोडल मैक्स-चौड़ाई
लौहका
.modal-sm
300px
डिफाल्ट
कोई नेईं
500px
बड्डा
.modal-lg
800px
अतिरिक्त बड़े
.modal-xl
1140px
संशोधक वर्ग दे बगैर साढ़ा डिफ़ॉल्ट मोडल "मध्यम" आकार मोडल दा गठन करदा ऐ।
Extra large modal
...
Large modal
...
Small modal
...
प्रयोग करना
मोडल प्लगइन तुंदी छिपी दी सामग्री गी मंग पर, डेटा विशेषताएं जां जावास्क्रिप्ट दे राहें टॉगल करदा ऐ। एह् डिफाल्ट स्क्रॉल व्यवहार गी ओवरराइड करने आस्तै बी जोड़दा ऐ ते मोडल दे बाहर क्लिक करदे बेल्लै दस्से गेदे मोडल गी खारिज करने आस्तै इक क्लिक क्षेत्र उपलब्ध करोआने आस्तै इक पैदा .modal-openकरदा ऐ .<body>.modal-backdrop
डेटा विशेषताएं दे माध्यम कन्नै
जावास्क्रिप्ट लिखने दे बगैर इक मोडल सक्रिय करो। इक नियंत्रक तत्व पर सेट करो data-toggle="modal", जि’यां इक बटन, इक data-target="#foo"जां href="#foo"टॉगल करने आस्तै इक विशिष्ट मोडल गी निशाना बनाने आस्तै.
विकल्पें गी डेटा एट्रिब्यूट जां जावास्क्रिप्ट दे राहें पास कीता जाई सकदा ऐ। डेटा विशेषताएं आस्तै, विकल्प नांऽ गी data-, च जोड़ो , जिऱयां data-backdrop="".
नां
किसम
डिफाल्ट
ब्यौरा
पृष्ठभूमि दा
बूलियन या स्ट्रिंग दा'static'
सच्च
इक मोडल-बैकग्राउंड तत्व शामल ऐ। वैकल्पिक रूप कन्नै, staticइक बैकग्राउंड आस्तै निर्दिश्ट करो जेह् ड़ी क्लिक पर मोडल गी बंद नेईं करदी ऐ.
कीबोर्ड दा
बूलियन
सच्च
एस्केप कुंजी दबाने पर मोडल बंद करदा ऐ
ध्यान देना
बूलियन
सच्च
इनिशियलाइज होने पर मोडल पर ध्यान दिंदा ऐ।
शो
बूलियन
सच्च
आरंभ करने पर मोडल दस्सदा ऐ।
विधियां
एसिंक्रोनस तरीके ते संक्रमण
सारे एपीआई तरीके एसिंक्रोनस न ते इक संक्रमण शुरू करदे न . संक्रमण शुरू होने दे बाद गै ओह् काल करने आह् ले कोल वापस औंदे न पर इसदे खत्म होने थमां पैह् ले . इसदे अलावा, इक संक्रमण घटक पर इक विधि काल गी अनदेखा कीता जाग .
तुंदी सामग्री गी मोडल दे रूप च सक्रिय करदा ऐ। इक वैकल्पिक विकल्प स्वीकार करदा ऐ object.
.modal('toggle')
मैन्युअल रूप कन्नै इक मोडल टॉगल करदा ऐ। मोडल गी असल च दस्सने जां छिपाने थमां पैह् ले (यानी shown.bs.modalजां hidden.bs.modalघटना होने थमां पैह् ले) कॉलर गी वापस करदा ऐ।
.modal('show')
मैन्युअल रूप कन्नै इक मोडल खोह् लदा ऐ। मोडल गी असल च दस्से जाने थमां पैह् ले (यानी shown.bs.modalघटना होने थमां पैह् ले) कॉलर गी वापस करदा ऐ।
.modal('hide')
मैन्युअल रूप कन्नै इक मोडल छिपांदा ऐ। मोडल गी असल च छिपाने थमां पैह् ले (यानी hidden.bs.modalघटना होने थमां पैह् ले) कॉलर गी वापस करदा ऐ।
.modal('handleUpdate')
जेकर कुसै मोडल दी ऊंचाई खुल्ली होने पर बदलदी ऐ (यानी स्क्रॉलबार दिक्खने दी स्थिति च) तां मोडल दी स्थिति गी मैन्युअल रूप कन्नै दुबारा समायोजित करो।
.modal('dispose')
इक तत्व दा मोडल नष्ट करदा ऐ।
घटनाएं
बूटस्ट्रैप दा मोडल वर्ग मोडल कार्यक्षमता च हुक करने आस्तै किश घटनाएं गी उजागर करदा ऐ। सारे मोडल घटनाएं गी मोडल पर गै (यानी पर <div class="modal">) फायर कीता जंदा ऐ ।
घटना दा प्रकार
Description
show.bs.modal
This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.
shown.bs.modal
This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event.
hide.bs.modal
This event is fired immediately when the hide instance method has been called.
hidden.bs.modal
This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
hidePrevented.bs.modal
एह् घटना उस बेल्लै फायर कीती जंदी ऐ जिसलै मोडल दस्सेआ जंदा ऐ, इसदी बैकग्राउंड ऐ staticते मोडल दे बाहर इक क्लिक जां इक एस्केप कुंजी दबाना कीबोर्ड विकल्प कन्नै कीता जंदा ऐ data-keyboardजां false.