วิธีตรวจสอบว่าโมดอล bootstrap เปิดอยู่หรือไม่ฉันจึงสามารถใช้ jquery validate ได้

ฉันจำเป็นต้องทำการตรวจสอบความถูกต้องก็ต่อเมื่อโมดอลเปิดอยู่เพราะถ้าฉันเปิดแล้วฉันก็ปิดมันและฉันกดปุ่มที่เปิดโมดอลมันใช้ไม่ได้เพราะกำลังทำการตรวจสอบ jquery แต่ไม่ใช่ แสดงเนื่องจากโมดอลถูกปิด

ดังนั้นฉันต้องการโฆษณา 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>

เพื่อหลีกเลี่ยงเงื่อนไขการแข่งขันที่ @GregPettit กล่าวถึงคุณสามารถใช้:

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

ตามที่กล่าวไว้ในทวิตเตอร์ Bootstrap Modal - IsShown

เมื่อกิริยายังไม่ได้เปิด.data('bs.modal')ผลตอบแทนundefinedจึง|| {}- ซึ่งจะทำให้isShownข้อมูล (falsy) undefinedมูลค่า หากคุณเคร่งครัดคุณสามารถทำได้($("element").data('bs.modal') || {isShown: false}).isShown

คุณสามารถใช้ได้

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

Bootstrap เพิ่มinคลาสเมื่อโมดอลเปิดอยู่และลบออกเมื่อปิด

คุณยังสามารถใช้ jQuery ได้โดยตรง

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

ตรวจสอบว่าโมดอลเปิดอยู่หรือไม่

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

เพื่อแนบตัวฟังเหตุการณ์

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

Bootstrap 2, 3 Check คือโมดอลที่เปิดอยู่ในหน้า:

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

เวอร์ชั่นที่รองรับBootstrap 2, 3, 4+

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

เฉพาะBootstrap 4+

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

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

จะไม่ทำงานหากไม่ได้แสดงโมดอลมาก่อน คุณจะต้องเพิ่มเงื่อนไขเพิ่มเติม:

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

ดังนั้นคำตอบโดยคำนึงถึงการปรากฏตัวครั้งแรก:

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

คุณยังสามารถใช้

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

บน bootstrap-modal.js v2.2.0:

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

ทำไมสิ่งที่ซับซ้อนในเมื่อมันสามารถทำได้ด้วย jQuery ง่ายๆดังต่อไปนี้

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