Do something when modal is opened

Question

I want to remove a class from a button as soon as my modal opens. I'm having trouble doing this because I don't know how to check when the modal is opened. I'm using uikit which gives me the following examples:

var modal = UIkit.modal(".modalSelector");

if ( modal.isActive() ) {
    modal.hide();
} else {
    modal.show();
}

$('.modalSelector').on({

    'show.uk.modal': function(){
        console.log("Modal is visible.");
    },

    'hide.uk.modal': function(){
        console.log("Element is not visible.");
    }
});

My modal is the following:

<div id="offerModal" class="uk-modal">
    <div class="uk-modal-dialog uk-modal-dialog-blank">...</div>
</div>

score 2 · Accepted Answer · answered Mar 17 '16 at 23:34

2

Something like this should do the trick for you:

$('.modalSelector').on({

    'show.uk.modal': function(){
        console.log("Modal is visible.");
        $('.btn').removeClass('abc');
    },

    'hide.uk.modal': function(){
        console.log("Element is not visible.");
    }
});

answered Mar 17 '16 at 23:34

bmcculley

2,048
1
14
17

I was confused as to whether I use .modalSelector or my actual id for my modal? – unconditionalcoder Mar 17 '16 at 23:40
Oh, yes use your modal id. – bmcculley Mar 17 '16 at 23:42
but is this as '#offerModal' or just 'offerModal'? – unconditionalcoder Mar 17 '16 at 23:43
For an id value you'll need to include the hash, this indicates that it's an id. If it's a class you'll need to include a '.' on the beginning. – bmcculley Mar 17 '16 at 23:46

Do something when modal is opened

1 Answers1