CODEWITHSUNDEEP
htmlcssmodal-dialog
BabyGluk
BabyGluk

Reputation: 89

Hide html overflow after opeping modal window

After opening modal window, visible 2 scrolls (html and modal). I want to hide html overflow , and do visible after closing modal window. How do this without js? only by css

$('.modal').on('show', function() {
    $("html").css({
        overflow: 'hidden'
    });
});

$('.modal').on('hide', function() {
    $("html").css({
        overflow: 'scroll'
    });
});

Upvotes: 2

Views: 1008

Answers (1)

ghaschel
ghaschel

Reputation: 1355

The correct event triggers for the Bootstrap's modal are 'show.bs.modal' and 'hide.bs.modal'

Try this instead:

jQuery('.modal').on('show.bs.modal', function() {
    jQuery("html").css({
        overflow: 'hidden'
    });
});

jQuery('.modal').on('hide.bs.modal', function() {
    jQuery("html").css({
        overflow: 'scroll'
    });
});

But I strongly advise you to use the Bootstrap's method to show/hide a modal. It handles the HTML overflow automatically.

jQuery("#element").modal('show');
jQuery("#element").modal('hide');

Upvotes: 1

Related Questions