javascript - modal-open is not removing from <body> - Stack Overflow

IT技术

更新时间：2025-03-010

admin管理员组
文章数量:1254285

Hi I am showing a modal when person opens my site which works fine but when user closes it modal-open class is not removed from which doesn't allow them to scroll.

    <div id="ageModal" class="modal fade" data-backdrop="static" data-keyboard="false" role="dialog" style="padding-right: 0px;">
    <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content" style="background-color: #c9c9f8;" >
            <div class="modal-header">
                <button type="button" class="close hide" data-dismiss="modal">&times;</button>

            </div>
            <div class="modal-body text-center" style="padding-top:10%">
               <h1>hi</h1>
                <div>
                    <button type="button" class="btn btn-default" id="ageVerifyYes">Yes</button>
                    <button type="button" class="btn btn-default" id="ageVerifyNo">No</button>
                </div>
                <div>
                    <input type="checkbox" id="rememberMeAge"> Remember Me
                </div>
                <div id="ageVerifyError" class="hide">
                    <p class="error-msg">You should agree</p>
                </div>
            </div>
            <div class="modal-footer hide">
                <button type="button" class="btn btn-default" data-dismiss="modal">Yes</button>
                <button type="button" class="btn btn-default">No</button>
            </div>
        </div>
    </div>
</div>
    <style type="text/css">
#ageModal .modal-dialog {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0px!important; 
}

#ageModal .modal-body{
    height: 80%;
}
#ageModal .modal-content {
    height: 98%;
    min-height: 100%;
    border-radius: 0;
}       
#ageModal .error-msg{
    color: #c00;
    padding: 10px;
}
.in{
    padding:0px!important;
}
</style>




<script type="text/javascript">

$(document).ready(function() {



    var isshow = sessionStorage.getItem('isshow');
if (isshow == null || isshow == '') {
    sessionStorage.setItem('isshow', 1);
    // Show popup here
    $('#ageModal').show();
}
else{
        //hide popup if opened once
        $('#ageModal').hide();
        $('.fade').hide();
    }
});

$('#ageVerifyNo').on('click', function(){
    $('#ageVerifyError').removeClass('hide');
});

$('#ageVerifyYes').on('click', function(){
    if($('#rememberMeAge').prop('checked') === true){
        setCookie('ageVerified',1,1);
    }
    $('#ageModal').modal('hide');
    $("body").removeClass("modal-open");
});

function setCookie(name,value,days) {

    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days*24*60*60*1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}

function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

function eraseCookie(name) {   
    document.cookie = name+'=; Max-Age=-99999999;';  
}

I am basically storing in session if pop-up was opened or not. it works as expected but modal-open class stays with body tag even after modal is closed. I did try $("body").removeClass("modal-open"); but no luck I have also created another and tried to append there but again same issue. I can not edit bootstrap as I am using cdn

Hi I am showing a modal when person opens my site which works fine but when user closes it modal-open class is not removed from which doesn't allow them to scroll.

    <div id="ageModal" class="modal fade" data-backdrop="static" data-keyboard="false" role="dialog" style="padding-right: 0px;">
    <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content" style="background-color: #c9c9f8;" >
            <div class="modal-header">
                <button type="button" class="close hide" data-dismiss="modal">&times;</button>

            </div>
            <div class="modal-body text-center" style="padding-top:10%">
               <h1>hi</h1>
                <div>
                    <button type="button" class="btn btn-default" id="ageVerifyYes">Yes</button>
                    <button type="button" class="btn btn-default" id="ageVerifyNo">No</button>
                </div>
                <div>
                    <input type="checkbox" id="rememberMeAge"> Remember Me
                </div>
                <div id="ageVerifyError" class="hide">
                    <p class="error-msg">You should agree</p>
                </div>
            </div>
            <div class="modal-footer hide">
                <button type="button" class="btn btn-default" data-dismiss="modal">Yes</button>
                <button type="button" class="btn btn-default">No</button>
            </div>
        </div>
    </div>
</div>
    <style type="text/css">
#ageModal .modal-dialog {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0px!important; 
}

#ageModal .modal-body{
    height: 80%;
}
#ageModal .modal-content {
    height: 98%;
    min-height: 100%;
    border-radius: 0;
}       
#ageModal .error-msg{
    color: #c00;
    padding: 10px;
}
.in{
    padding:0px!important;
}
</style>




<script type="text/javascript">

$(document).ready(function() {



    var isshow = sessionStorage.getItem('isshow');
if (isshow == null || isshow == '') {
    sessionStorage.setItem('isshow', 1);
    // Show popup here
    $('#ageModal').show();
}
else{
        //hide popup if opened once
        $('#ageModal').hide();
        $('.fade').hide();
    }
});

$('#ageVerifyNo').on('click', function(){
    $('#ageVerifyError').removeClass('hide');
});

$('#ageVerifyYes').on('click', function(){
    if($('#rememberMeAge').prop('checked') === true){
        setCookie('ageVerified',1,1);
    }
    $('#ageModal').modal('hide');
    $("body").removeClass("modal-open");
});

function setCookie(name,value,days) {

    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days*24*60*60*1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}

function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

function eraseCookie(name) {   
    document.cookie = name+'=; Max-Age=-99999999;';  
}

I am basically storing in session if pop-up was opened or not. it works as expected but modal-open class stays with body tag even after modal is closed. I did try $("body").removeClass("modal-open"); but no luck I have also created another and tried to append there but again same issue. I can not edit bootstrap as I am using cdn

Share Improve this question asked Apr 6, 2018 at 21:25 newbie756 452 gold badges2 silver badges9 bronze badges

Are you including Bootstrap JS twice or something? Can you make a jsbin. and replicate the issue? – Praveen Kumar Purushothaman Commented Apr 6, 2018 at 21:28
1 If $('#ageModal').modal('hide'); doesn't work give $("#ageModal .close").click(); a shot – BShaps Commented Apr 6, 2018 at 21:32
@BShaps doesn't work :'( – newbie756 Commented Apr 6, 2018 at 21:38
Are there any error messages in the console? – BShaps Commented Apr 6, 2018 at 21:39
@BShaps no there are no error messages in console. The only way I can find is <body class='modal-open'> is not removed – newbie756 Commented Apr 6, 2018 at 21:45

Add a ment |

4 Answers 4

Sorted by: Reset to default 9

Try this as well

$('body').removeClass('modal-open');
$('.modal-backdrop').remove();

As an alternative quick solution just remove the fade class from the
<div id="ageModal" class="modal fade"....
This issue can be caused by the modal('hide') being called before the fade animation has fully pleted

Your .show() and .hide() should be .modal('show') and .modal('hide')

ngDoCheck(){
        var x = $(document).find('.modal.show').length;
        if(x>0) {
            $('body').addClass('modal-open');
        } else {
            $('body').removeClass('modal-open');
        }

      }

本文标签： javascriptmodalopen is not removing from ltbodygtStack Overflow

版权声明：本文标题：javascript - modal-open is not removing from <body> - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.betaflare.com/web/1740799832a2288072.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

编程频道|软件玩家 - 软件改变生活！

javascript - modal-open is not removing from <body> - Stack Overflow

4 Answers 4

更多相关文章