CODEWITHSUNDEEP
jqueryvalidationtwitter-bootstrapmodal-dialog
Mariana Hernandez
Mariana Hernandez

Reputation: 1969

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

I need to make a validation only if a modal is open, because if I open it, and then I close it, and the I press the button that opens the modal it doesn't work because it is making the jquery validation, but not showing because the modal was dismissed.

So I want to ad a jquery if modal is open so the i do validate, is this 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>

Upvotes: 147

Views: 261324

Answers (12)

Brian M. Hunt
Brian M. Hunt

Reputation: 83808

// For Bootstrap 5
$('#myModal').hasClass('show');

// For Bootstrap 3 and 4, to avoid the race condition @GregPettit mentions, one can use:

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

// or, with the optional chaining operator (?.)
$("#myModal").data('bs.modal')?._isShown    // Bootstrap 4
$("#myModal").data('bs.modal')?.isShown     // Bootstrap <= 3

as discussed in Twitter Bootstrap Modal - IsShown.

When the modal is not yet opened, .data('bs.modal') returns undefined, hence the || {} - which will make isShown the (falsy) value undefined. If you're into strictness one could do ($("element").data('bs.modal') || {isShown: false}).isShown

Upvotes: 229

Noe Garcia
Noe Garcia

Reputation: 11

this code indication, when modal is open(in body), or close (result false)

var trueFalse = ($('body').hasClass('modal-open'));

Upvotes: 1

Yuvraj Hinger
Yuvraj Hinger

Reputation: 368

JavaScript Approach to check for any particular model state by its ID.

modalstate = document.getElementById('modal-id').classList.contains('show')

This will returns true if particular modal-id is open.

Upvotes: 1

Edoardo Vignati
Edoardo Vignati

Reputation: 553

As a workaround I personally use a custom global flag to determine whether the modal has been opened or not and I reset it on 'hidden.bs.modal'

Upvotes: 0

Sokka
Sokka

Reputation: 31

Why complicate things when it can be done with simple jQuery like following.

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

Upvotes: 2

user5490177
user5490177

Reputation:

Bootstrap 2 , 3 Check is any modal open in page :

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

compatible version Bootstrap 2 , 3 , 4+

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

Only Bootstrap 4+

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

Upvotes: 19

Bhavesh Lalwani
Bhavesh Lalwani

Reputation: 325

You can also use

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

Upvotes: 11

Raja Khoury
Raja Khoury

Reputation: 3195

Check if a 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 )
});

Upvotes: 16

Ricardo
Ricardo

Reputation: 4308

On bootstrap-modal.js v2.2.0:

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

Upvotes: 0

alexoviedo999
alexoviedo999

Reputation: 6791

You can also directly use jQuery.

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

Upvotes: 100

joanfihu
joanfihu

Reputation: 336

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

won't work if the modal hasn't been shown before. You will need to add an extra condition:

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

so the answer taking into account first appearance:

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

Upvotes: 4

tleef
tleef

Reputation: 3594

You can use

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

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

Upvotes: 95

Related Questions