लाइटबॉक्स, उपयोगकर्ता सूचना, या पूर्ण रूप सं कस्टम सामग्री कें लेल अपन साइट पर संवाद जोड़य कें लेल बूटस्ट्रैप कें जावास्क्रिप्ट मोडल प्लगइन कें उपयोग करूं.
कोना काज करैत अछि
बूटस्ट्रैप केरऽ मोडल घटक स॑ शुरू करै स॑ पहल॑ निम्नलिखित बात क॑ जरूर पढ़ी क॑ हमरऽ मेनू विकल्प हाल ही म॑ बदली गेलऽ छै ।
मोडल एचटीएमएल, सीएसएस, आ जावास्क्रिप्ट के साथ बनायल गेल अछि | ई सब दस्तावेज म॑ बाकी सब कुछ प॑ स्थित छै आरू स्क्रॉल क॑ हटाबै छै <body>ताकि मोडल सामग्री एकरऽ बदला म॑ स्क्रॉल होय जाय ।
मोडल “बैकग्राउंड” पर क्लिक करला पर मोडल स्वतः बंद भ जायत |
बूटस्ट्रैप एक बेर मे केवल एकटा मोडल विंडो कें समर्थन करएयत छै. नेस्टेड मोडल समर्थित नै छै कियाकि हम ओकरा खराब उपयोगकर्ता अनुभव मानैत छी.
मोडल उपयोग करैत position: fixedअछि , जे कखनो काल एकर रेंडरिंग के बारे में कनेक विशेष भ सकैत अछि. जखन संभव होयत, अपन मोडल एचटीएमएल कें शीर्ष-स्तरीय स्थिति मे राखू ताकि अन्य तत्वक सं संभावित हस्तक्षेप सं बचल जा सकय. .modalसंभवतः अहाँ कोनो आन निश्चित तत्वक भीतर एकटा नेस्ट करबा काल समस्या मे पड़ब .
HTML5 अपनऽ शब्दार्थ क॑ कोना परिभाषित करै छै, एकरऽ कारण, HTML autofocusविशेषता केरऽ बूटस्ट्रैप मोडल म॑ कोनो प्रभाव नै पड़ै छै । समान प्रभाव प्राप्त करबाक लेल, किछु कस्टम जावास्क्रिप्ट क उपयोग करू:
नीचाँ एकटा स्थिर मोडल उदाहरण अछि (अर्थात ओकर positionआओर displayओवरराइड कएल गेल अछि) । मोडल हेडर, मोडल बॉडी (के लेल आवश्यक padding), आ मोडल पाद लेख (वैकल्पिक) शामिल अछि । हम कहैत छी जे अहाँ जखन संभव हो खारिज करबाक क्रियाक संग मोडल हेडर शामिल करू, वा कोनो आन स्पष्ट खारिज कार्य प्रदान करू.
जखन बैकग्राउंड स्थिर पर सेट कएल जाएत अछि, तखन मोडल ओकरा बाहर क्लिक करबा पर बंद नहि होएत. एकरा आजमाबय लेल नीचा देल गेल बटन पर क्लिक करू.
मोडल शीर्षक
हमरा बाहर क्लिक करब त हम बंद नहि करब। एस्केप की दबाबय के कोशिश तक नहि करू.
लम्बा सामग्री स्क्रॉल करब
जब॑ मोडल उपयोगकर्ता केरऽ व्यूपोर्ट या डिवाइस लेली बहुत लम्बा होय जाय छै, त॑ वू खुद पन्ना स॑ स्वतंत्र रूप स॑ स्क्रॉल करै छै । नीचा देल गेल डेमो के ट्राई करू आ देखू जे हमर मतलब की अछि।
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.
टूलटिप्स आ पोपोवर
आवश्यकतानुसार टूलटिप आ पोपोवर कें मोडल कें भीतर राखल जा सकय छै. जखन मोडल बंद भ जायत छै तखन भीतर कोनों टूलटिप आ पॉपओवर सेहो स्वतः खारिज भ जायत छै.
कें भीतर नेस्टिंग करयत एकटा मोडल कें भीतर बूटस्ट्रैप ग्रिड सिस्टम कें उपयोग .container-fluidकरूं .modal-body. तखन, सामान्य ग्रिड सिस्टम क्लासक उपयोग करू जेना अहाँ कतहु आओर करब.
Grids in modals
.col-md-4
.col-md-4 .ml-auto
.col-md-3 .ml-auto
.col-md-2 .ml-auto
.col-md-6 .ml-auto
Level 1: .col-sm-9
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6
भिन्न-भिन्न मोडल सामग्री
बटन के एकटा गुच्छा अछि जे सब किछु अलग सामग्री के संग एकहि मोडल के ट्रिगर करैत अछि? उपयोग event.relatedTargetआरू HTML data-*विशेषता (संभवतः jQuery के माध्यम स॑ ) मोडल केरऽ सामग्री म॑ बदलाव करै लेली ई आधार प॑ कि कोन बटन प॑ क्लिक करलऽ गेलऽ छेलै ।
नीचाँ लाइव डेमो अछि जकर बाद उदाहरण एचटीएमएल आ जावास्क्रिप्ट अछि । अधिक जानकारी क लेल, पर विस्तार स जानकारी क लेल मोडल इवेंट डॉक्स पढ़ूrelatedTarget .
New message
एनीमेशन बदलें
चर मोडल फेड-इन एनीमेशन स पहिने $modal-fade-transformके रूपांतरण स्थिति निर्धारित करैत अछि , चर मोडल फेड-इन एनीमेशन के अंत में के रूपांतरण निर्धारित करैत अछि |.modal-dialog$modal-show-transform.modal-dialog
मोडल के लेल जे देखय लेल फीका पड़य के बजाय बस देखाइत अछि, .fadeअपन मोडल मार्कअप सं क्लास हटाउ.
गतिशील ऊंचाई
यदि कोनों मोडल कें खुलल रहला पर ओकर ऊंचाई बदलय छै, त अहां कें कॉल $('#myModal').modal('handleUpdate')करय कें चाही ताकि मोडल कें स्थिति कें पुनः समायोजित करय कें लेल स्क्रॉलबार दिखाय कें स्थिति मे.
सुलभता
role="dialog"आओर aria-labelledby="...", मोडल शीर्षक के संदर्भित करैत, .modal, आओर स्वयं role="document"मे अवश्य जोड़ू . .modal-dialogएकर अतिरिक्त, अहाँ अपन मोडल संवादक विवरण aria-describedbyon केर संग द' सकैत छी .modal.
यूट्यूब वीडियो एम्बेड करब
यूट्यूब वीडियो क॑ मोडल म॑ एम्बेड करै लेली बूटस्ट्रैप म॑ नै हुअ॑ अतिरिक्त जावास्क्रिप्ट के जरूरत छै ताकि प्लेबैक क॑ स्वचालित रूप स॑ बंद करलऽ जाय सक॑ आरू बहुत कुछ । अधिक जानकारी के लेल ई सहायक स्टैक ओवरफ्लो पोस्ट देखू ।
वैकल्पिक आकार
मोडल कें तीन वैकल्पिक आकार छै, जे संशोधक वर्गक कें माध्यम सं उपलब्ध छै जे एकटा पर राखल जैतय .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"टॉगल करय कें लेल एकटा विशिष्ट मोडल कें लक्षित करय कें लेल.
जावास्क्रिप्ट के माध्यम से
myModalजावास्क्रिप्ट के एकल लाइन के साथ id के साथ एक मोडल कॉल करें:
विकल्प
विकल्पक कें डाटा एट्रिब्यूट या जावास्क्रिप्ट कें माध्यम सं पास कैल जा सकय छै. डेटा विशेषताक लेल, विकल्प नाम केँ 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">) पर फायर कयल जाइत अछि |
घटना प्रकार
वर्णन
शो.बीएस.मोडल
showइंस्टेंस मेथड कें कॉल करय पर इ घटना तुरंत फायर भ जायत छै. यदि क्लिक के कारण छै, त क्लिक करलौ गेलौ तत्व relatedTargetघटना के गुण के रूप मँ उपलब्ध छै.
देखाओल गेल.bs.modal
इ घटना तखन फायर कैल जायत छै जखन मोडल कें उपयोगकर्ता कें लेल दृश्यमान बना देल गेल छै (सीएसएस संक्रमण पूरा हुअ कें इंतजार करतय). यदि क्लिक के कारण छै, त क्लिक करलौ गेलौ तत्व relatedTargetघटना के गुण के रूप मँ उपलब्ध छै.