web-dev-qa-db-fra.com

Comment vérifier si bootstrap modal est ouvert, je peux donc utiliser jquery validate

je n'ai besoin de valider que si un modal est ouvert, car si je l'ouvre, puis je le ferme, et j'appuie sur le bouton qui ouvre le modal pour qu'il ne fonctionne pas car il effectue la validation jQuery, mais pas montrant parce que le modal a été licencié.

Donc, je veux ajouter un jQuery si modal est ouvert afin que je valide, est-ce possible?

<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

Pour éviter la condition de concurrence mentionnée par @GregPettit, on peut utiliser:

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

comme indiqué dans Twitter Bootstrap Modal - IsShown .

Lorsque le modal n'est pas encore ouvert, .data('bs.modal') renvoie undefined, d'où le || {} - qui fera de isShown la valeur (falsy) undefined. Si vous aimez la rigueur, on pourrait faire ($("element").data('bs.modal') || {isShown: false}).isShown

159
Brian M. Hunt

Vous pouvez utiliser

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

Bootstrap ajoute la classe in lorsque le modal est ouvert et le supprime lorsqu'il est fermé

69
tleef

Vous pouvez également utiliser directement jQuery.

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

ne fonctionnera pas si le modal n'a pas été montré auparavant. Vous devrez ajouter une condition supplémentaire:

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

donc la réponse en tenant compte de la première apparition:

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

Vérifier si un modal est ouvert

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

Pour attacher un écouteur d'événement

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

Bootstrap 2,3,4 Vérifiez si un modal est ouvert dans la page:

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

Sur bootstrap-modal.js v2.2.0:

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