Twitter Bootstrap Modal - IsShown

Question

Hello Fellow SO users,

Got this problem where i auto populate a modal box.

Sometimes it already has content, so i tried doing a hide/show on each request. But the show is fired before the hide function is done, so it breaks the script.

I can't do a bind to "hidden", because if it's the first time - it won't fire the hidden function from bootstrap.

Using modal('true') i can see the object has a isShown element, but does anyone know how i can access it?

The console.log shows this:

$backdrop
    [div.modal-backdrop]

$element
    [div#modal-from-dom.modal]

isShown
    true

settings
    Object { backdrop="static", keyboard=true, show=false}

hide
    function()

show
    function()

toggle
    function()

__proto__
    Object { toggle=function(), show=function(), hide=function()}

Ricoriki

Answer 1

Answer for Twitter Bootstrap 3:

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

or

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

Morass

Answer 2

The answer is:

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

Ricoriki

But you cannot check this way if you've never shown the modal before. This only works if you have already once opened a modal window. Limited way. – Vernation

if ($("element").data('modal') && $("element").data('modal').isShown) { worked fine for me } – Epigeal

Answer 3

On bootstrap 3.0.x

  $('#modal_Id').data().modal.isShown

or

  $('#modal_Id').data('modal').isShown

modal_id is the id of your modal

Sailing

Answer 4

If you'd like a Bootstrap version 2 and 3 solution and would rather not hit the data (since it looks like the name already changed once)...

$(element).hasClass('in') (would be "faded in" or "visible"; a plus that it returns a boolean)

or

"false" === $(element).attr('aria-hidden') (so that's aria-hidden or visible as well. "true" for hidden in this case.)

See source from bootstrap 3.3.1 here:

this.backdrop(function () {
...
  that.$element
    .addClass('in')
    .attr('aria-hidden', false)
...

Again, that code is from 3.3.1. Can confirm this also works in 2.1.0. Duck sniffing [sic] is probably better in this case.

Tinderbox

Answer 5

Answer for Bootstrap 4:

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

As a function:

function isModalShown(modal) {
    var modalIsShown = (modal.data('bs.modal') || {})._isShown;
    return !(typeof modalIsShown === 'undefined' || !modalIsShown);
}

Gemot

I'm just checking if modal has 'shown' class, is this better in some way? It works as expected for me .. – Anyone

Answer 6

You can use this:

$('#mymodal').on('shown.bs.modal', function (e) {
    console.log("Modal is shown");
//your other codes here...
})

Patio