禁用弹出背景

Disable the popup background

本文关键字：背景      更新时间：2023-09-26

我的代码是：

<script src="http://code.jquery.com/jquery-1.6.1.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#pop").click(function(){             
            $("#overlay_form").fadeIn(1000); 
            positionPopup(); 
        }); 
        function positionPopup()
        {
            if(!$("#overlay_form").is(':visible')){
                return;
            }
            $("#overlay_form").css({
                left: ($(window).width() - $('#overlay_form').width()) / 2,
                top: ($(window).width() - $('#overlay_form').width()) / 7,
                position:'absolute'
            });
        }
        $(window).bind('resize',positionPopup);
    </script>
    <style>
        #overlay_form{position: absolute;border: 5px solid gray;padding: 10px;background: white; width: 380px;height: 120px;border-radius:20px;}
    </style>
    <div id="overlay_form" style="display:none;">
        <p>hello</p>
    </div>

我需要禁用后台单击事件。

在点击处理程序中：

$("#pop").click(function(event){
     event.stopPropagation();
     event.preventDefault();
});

$("#overlay_form").on("click", function(e) {
  e.preventDefault();
  e.stopPropagation();
});
您可以通过在

弹出窗口下方用叠加层覆盖整个页面来做到这一点。在打开弹出窗口之前添加此代码。

$("body").append('<div class="modalOverlay">');

和 CSS

.modalOverlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: rgba(0,0,0,0.3); /* black semi-transparent */
}

然后，当您关闭弹出窗口时，只需从页面中删除此div即可。

相关文章：