禁用弹出背景

时间:2013-09-17 05:36:14

标签: javascript jquery html css popup

这里我的代码是:

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

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

3 个答案:

答案 0 :(得分:1)

内部点击处理程序:

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

答案 1 :(得分:0)

$("#overlay_form").on("click", function(e) {
  e.preventDefault();
  e.stopPropagation();
});

答案 2 :(得分: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。