web-dev-qa-db-ja.com

bootstrapモーダルが開いているかどうかを確認する方法

モーダルが開いている場合にのみ検証を行う必要があります。それを開いてから閉じて、モーダルを開くボタンを押すと、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>
jqueryvalidationtwitter-bootstrapmodal-dialog
98
Mariana Hernandez

@GregPettitが言及する競合状態を回避するために、以下を使用できます。

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

Twitter Bootstrap Modal-IsShown で説明されています。

モーダルがまだ開かれていない場合、.data('bs.modal')はundefinedを返します。したがって、|| {}-はisShownを（偽の）値undefinedにします。もしあなたが厳密さに興味があるなら、($("element").data('bs.modal') || {isShown: false}).isShownをすることができます

155
Brian M. Hunt

使用できます

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

ブートストラップは、モーダルが開いているときにinクラスを追加し、閉じているときにそれを削除します

68
tleef

JQueryを直接使用することもできます。

$('#myModal').is(':visible');
42
alexoviedo999
$("element").data('bs.modal').isShown

モーダルが以前に表示されていない場合は機能しません。追加の条件を追加する必要があります。

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

最初の外観を考慮した答え：

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

モーダルが開いているかどうかを確認します

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

イベントリスナーをアタッチするには

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

Bootstrap 2,3,4チェックはページ内の任意のモーダルオープンです：

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

Bootstrap-modal.js v2.2.0の場合：

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