बूटस्ट्रैप मोडल खुला है या नहीं, इसकी जांच कैसे करें, इसलिए मैं jquery वेलिडेट का उपयोग कर सकता हूं

Question

मुझे केवल एक सत्यापन करने की आवश्यकता है यदि एक मोडल खुला है, क्योंकि अगर मैं इसे खोलता हूं, और फिर मैं इसे बंद कर देता हूं, और मैं उस बटन को दबाता हूं जो मॉडल को खोलता है यह काम नहीं करता है क्योंकि यह jquery सत्यापन बना रहा है, लेकिन नहीं दिखा रहा है क्योंकि मोडल खारिज कर दिया गया था।

इसलिए मैं एक जॉकरी का विज्ञापन करना चाहता हूं यदि मोडल खुला है तो मैं मान्य करता हूं, क्या यह संभव है?

<script>
$(document).ready(function(){

var validator =$('#form1').validate(
 {
  ignore: "",
  rules: {

usu_login: {
  required: true
},
usu_password: {
  required: true
},
usu_email: {
  required: true
},
usu_nombre1: {
  required: true
},
usu_apellido1: {
  required: true
},
usu_fecha_nac: {
  required: true
},
usu_cedula: {
  required: true
},
usu_telefono1: {
  required: true
},
rol_id: {
  required: true
},
dependencia_id: {
  required: true
},
  },

  highlight: function(element) {
$(element).closest('.grupo').addClass('has-error');
        if($(".tab-content").find("div.tab-pane.active:has(div.has-error)").length == 0)
        {
            $(".tab-content").find("div.tab-pane:hidden:has(div.has-error)").each(function(index, tab)
            {
                var id = $(tab).attr("id");

                $('a[href="#' + id + '"]').tab('show');
            });
        }
  },
  unhighlight: function(element) {
$(element).closest('.grupo').removeClass('has-error');
  }
 });

}); // end document.ready

</script>

Answer 1

दौड़ हालत @GregPettit उल्लेख से बचने के लिए, एक का उपयोग कर सकते हैं:

($("element").data('bs.modal') || {})._isShown    // Bootstrap 4
($("element").data('bs.modal') || {}).isShown     // Bootstrap <= 3

जैसा कि ट्विटर बूटस्ट्रैप मोडल में चर्चा की गई है - IsShown ।

जब मोडल अभी तक खोला नहीं गया है, तो .data('bs.modal')रिटर्न - undefinedइसलिए || {}- जो isShown(झूठा) मूल्य बना देगा undefined। यदि आप सख्ती में हैं तो कोई भी कर सकता है($("element").data('bs.modal') || {isShown: false}).isShown

Comments

इस के साथ एक समस्या है, अगर मोडल खुला नहीं है, तो आपको $ ("तत्व") से 'अपरिभाषित' मिलेगा। डेटा ('bmmodal')

— फ्लेज़ानो

._ मेरे लिए काम किया, मैं बूटस्ट्रैप 4 अल्फा का उपयोग कर रहा

— हूं

बूटस्ट्रैप 4 में, यह _isShownनहीं है isShown।

— एलक्विमस्टा

मैं अभी जाँच कर रहा हूँ कि क्या मोडल ने 'क्लास' (बूटस्ट्रैप 4) दिखाया है - मैं इसकी आवश्यकता के अनुसार काम करता हूँ। क्या _isShown की जाँच किसी तरह से बेहतर है?

— ट्रेनोनिस

क्या आप टाइपस्क्रिप्ट में समाधान साझा कर सकते हैं?

— सूरजजीत बिस्वास

Answer 2

आप उपयोग कर सकते हैं

$('#myModal').hasClass('in');

बूटस्ट्रैप inक्लास को जोड़ता है जब मोडल खुला होता है और बंद होने पर उसे हटा देता है

Comments

यह फीका विकल्प और तेजी से क्लिक के साथ थोड़ा नाजुक हो जाता है या अजाक्स कॉल के माध्यम से मोडल को ट्रिगर करता है। फीका होने में देरी से दौड़ की स्थिति बन सकती है। फिर भी, सामग्री को स्थिर करने और उपयोगकर्ता के इंटरैक्शन के दौरान मॉडल केवल पॉप होने पर उस पर हुक करने का एक उपयोगी तरीका!

— ग्रेग पेटिट

बूटस्ट्रैप मोडल पर दौड़ की स्थिति से बचने का सबसे सुरक्षित, सुरक्षित तरीका है इसकी घटनाओं shown.bs.modalया hidden.bs.modalघटनाओं की सदस्यता लेना । इस प्रकार, जब आपका ईवेंट कोड नियंत्रित हो जाता है, तो आप निश्चित हैं कि संवाद स्पर्श स्थिति में नहीं है।

— एरिक लॉयड

क्या यह बूटस्ट्रैप संस्करण 4 में वैध है?

— महदी अलखतीब

@MahdiAlkhatib नहीं, यह बूटस्ट्रैप 4 में काम नहीं करता है आप बदल सकते 'in'साथ 'show'बूटस्ट्रैप 4. के लिए

— फिलिप स्ट्रैटफ़ोर्ड

Answer 3

आप सीधे jQuery का भी उपयोग कर सकते हैं।

$('#myModal').is(':visible');

Comments

जैसे जब उत्तर सरल हो। अगर ajax का उपयोग करते हैं, तो मैं इसे onbefore में उपयोग करता हूं और जांचता हूं और गलत तरीके से वापस लौटता हूं, इस तरह से यह सर्वर पर कई कॉल्स को भी रोकता है। धन्यवाद!

— eaglei22

स्वीकृत उत्तर अपरिभाषित या अशक्त लौट आया। यह त्रुटिपूर्ण काम किया। धन्यवाद!

— एलेक्स

Answer 4

जांचें कि क्या एक मोडल खुला है

$('.modal:visible').length && $('body').hasClass('modal-open')

एक घटना श्रोता संलग्न करने के लिए

$(document).on('show.bs.modal', '.modal', function () {
    // run your validation... ( or shown.bs.modal )
});

Answer 5

बूटस्ट्रैप 2, 3 चेक पेज में कोई भी मोडल खुला है:

if($('.modal.in').length)

संगत संस्करण बूटस्ट्रैप 2, 3, 4+

if($('.modal.in, .modal.show').length)

केवल बूटस्ट्रैप 4+

if($('.modal.show').length)

Comments

मैं बूटस्ट्रैप का उपयोग कर रहा हूं 4.1.3और यह showइसके बजाय कक्षा जोड़ता है in।

— आरिफ हुसैन

Answer 6

$("element").data('bs.modal').isShown

यदि मोडल पहले नहीं दिखाया गया है तो काम नहीं करेगा। आपको एक अतिरिक्त शर्त जोड़ने की आवश्यकता होगी:

$("element").data('bs.modal')

इसलिए जवाब पहली उपस्थिति में ले रहा है:

if ($("element").data('bs.modal') && $("element").data('bs.modal').isShown){
... 
}

Answer 7

आप भी उपयोग कर सकते हैं

$('#myModal').hasClass('show');

Answer 8

बूटस्ट्रैप- modal.js v2.2.0 पर:

( $('element').data('modal') || {}).isShown

Comments

उत्तरित परीक्षण, स्वीकृत उत्तर के

— रिकार्डो

यह क्यों ठुकराया गया है? यह ठीक वही था जो मुझे चाहिए था

— राहेल एज

Answer 9

चीजों को जटिल क्यों करें जब इसे निम्न तरह से सरल jQuery के साथ किया जा सकता है।

$('#myModal').on('shown.bs.modal', function (e) {
    console.log('myModal is shown');
    // Your actual function here
})