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


111

मुझे केवल एक सत्यापन करने की आवश्यकता है यदि एक मोडल खुला है, क्योंकि अगर मैं इसे खोलता हूं, और फिर मैं इसे बंद कर देता हूं, और मैं उस बटन को दबाता हूं जो मॉडल को खोलता है यह काम नहीं करता है क्योंकि यह 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>

जवाबों:


183

दौड़ हालत @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


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

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

8
बूटस्ट्रैप 4 में, यह _isShownनहीं है isShown
एलक्विमस्टा

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

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

80

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

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

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


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

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

क्या यह बूटस्ट्रैप संस्करण 4 में वैध है?
महदी अलखतीब

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

61

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

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

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

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

8

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

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

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

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

6

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

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

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

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

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

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

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

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

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

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

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

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



0

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

$('#myModal').on('shown.bs.modal', function (e) {
    console.log('myModal is shown');
    // Your actual function here
})
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.