Ovidiu G Ovidiu G - 4 days ago 6
CSS Question

Hide dropdown when modal is showing

I have a small problem with my modal window and for some reason I can't figure this out.
On mobile, I have a hamburger menu and in that menu I have a Log In link which open a modal window.
Everything works and the modal is showing but the problem is: the dropdown menu is showing on top of my modal.

I tried to hide it using:

$(document).ready(function() {

var modal = $('.modal'); //get modal window

if(modal.hasClass("in")){ //check if it has class "in"
$('.navbar-toggleable-md').hide(); //true, hide navbar
}

}); // end ready


What am I missing? Because the code from above it's not doing anything..

Answer

You need to catch an event either show.bs.modal or shown.bs.modal on .modal. Something like this:

$(document).ready(function() {
    $('.modal').on('shown.bs.modal', function (e) {
        $('.navbar-toggleable-md').hide();
});
});

Read bootstrap docs: modals-events

Comments