How to check if bootstrap modal is open, so I can use jquery check

Question

I need to check only if the modal is open, because if I open it and then I close it, and I press the button that opens the modality, it does not work, because it does the jquery check, but not shown because the modal was rejected.

So, I want to declare jquery if the modal is open, so I am checking if this is 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> 

Answer 1

To avoid @GregPettit race condition, you can use:

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

as discussed on Twitter Bootstrap Modal - IsShown .

When the modal form is not yet open, .data('bs.modal') returns undefined , so || {} || {} - this will make isShown value (false) undefined . If you are in strict accordance, you can do ($("element").data('bs.modal') || {isShown: false}).isShown

Answer 2

you can use

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

Bootstrap adds the in class when the modal is open and removes it when closed

Answer 3

You can also use jQuery directly.

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

Answer 4

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

will not work if the modal has not been shown before. You will need to add an additional condition:

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

so the answer given the first appearance:

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

Answer 5

Check if the modal is open

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

To attach an event listener

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

Answer 6

Bootstrap 2,3,4 Check if any modal is open on the page:

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

compatible version of Bootstrap 2,3,4, 4. 1+

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

Bootstrap 4.1 only

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

Answer 7

In bootstrap-modal.js v2.2.0:

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