1

这里我的代码是：

<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>

我需要禁用背景点击事件。

4

3 回答 3

1

内部点击处理程序：

$("#pop").click(function(event){
     event.stopPropagation();
     event.preventDefault();
});
于 2013-09-17T05:41:42.133 回答
0

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

$("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。

于 2013-09-17T05:41:37.537 回答
0 
$("#overlay_form").on("click", function(e) {
  e.preventDefault();
  e.stopPropagation();
});
于 2013-09-17T05:40:58.407 回答