Question

我要做的是在按下按钮并禁用背景时将div显示为弹出窗口。

我的弹出窗口工作得非常好但是当我尝试禁用背景时出现问题。要做到这一点，我会使用名为'mask'的div，它必须占据整个身体。这个div必须在开头隐藏，并在有人按下按钮时显示。

事情就是这个div（掩码）从一开始就一直显示。

我一直在尝试在互联网上找到解决方案，其中包括以下链接： CSS Disable background when div popup和 disable background using css when popup appear

第一个没有解决方案，第二个解决方案无法解决我的问题。

这是我的.jsp文件：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
        pageEncoding="ISO-8859-1"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">

    <link href="css/styles.css" rel="stylesheet" type="text/css">
    <link href="css/popup.css" rel="stylesheet" type="text/css">

    <script src="js/jquery-2.1.0.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript" src="js/popup.js"></script>
    </head>

    <body>
        <div id="pop">
            <div id="close">X</div>
            <div id="contentPop"></div>
        </div>

        <div id="mask">
            <div id="page-wrap">
                ...
                <a class="minibtn" onclick="show();">Show pop-up</a>
                            ...

            </div>
        </div>
    </body>

    </html>

我省略了所有与弹出窗口不同的代码，我已将其替换为“...”。

popup.css文件：

#mask{
    z-index: 500;
    position: fixed;
    display: none; /* removes the element completely from the document, it doesn't take up any space. */
    /* visibility: hidden; -- hides the element, but it still takes up space in the layout. */
    background: transparent;
    background-color: #ccc;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;

}

#pop {
   z-index:2;
   position:absolute;
   border: 1px solid #333333;
   text-align:center;
   background:#ffffff;
}

#close {
   float:right;
   margin-right:5px;
   cursor:pointer;
   font:Verdana, Arial, Helvetica, sans-serif;
   font-size:12px;
   font-weight:bold;
   color:#FFFFFF;
   background-color:#666666;
   width:12px;
   position:relative;
   margin-top:-1px;
   text-align:center;
}

popup.js文件：

function show() {
    // Show pop-up and disable background using #mask
    $("#pop").fadeIn('slow');
    $("#mask").fadeIn('slow');
    // Load content.
    $.post("contentPopup.html", function(data) {
        $("#contentPop").html(data);
    });

} 

$(document).ready(function() {
    // Hide pop-up and mask
    $("#mask").hide();
    $("#pop").hide();


    // Size pop-up
    var img_w = 600;
    var img_h = 300;

    // width and height in css.
    $("#pop").css('width', img_w + 'px');
    $("#pop").css('height', img_h + 'px');

    // Get values from the browser window
    var w = $(this).width();
    var h = $(this).height();

    // Centers the popup  
    w = (w / 2) - (img_w / 2);
    h = (h / 2) - (img_h / 2);
    $("#pop").css("left", w + "px");
    $("#pop").css("top", h + "px");

    // Function to close the pop-up
    $("#close").click(function() {
        $("#pop").fadeOut('slow');
        $("#mask").fadeOut('slow');
    });
});

非常感谢你的时间和帮助。如果有任何疑问，请告诉我，我会尝试以更好的方式解释它。

Answer 1

您是否尝试在css中使用display:none而不是在jQuery中使用函数hide()，然后在$('#showBtn').click使用function show()之后在此函数中使用到你的popup css并更改显示以阻止和停用背景。

Answer 2

有两个错误。您在“mask”div中使用了“Show popup”，但没有显示。第二个是关闭图标，你给出“z-index：2”，这应该大于掩码z-index以显示在掩码顶部

http://jsfiddle.net/5tFrg/

<pre>
    $(document).ready(function() {  
        $('.minibtn').click(function() {  
        // Show pop-up and disable background using #mask  
        $("#pop").fadeIn('slow');  
        $("#mask").fadeIn('slow');  
        // Load content.  
        $.post("contentPopup.html", function(data) {  
            $("#contentPop").html(data);  
        });  
        });  

        // Hide pop-up and mask
        $("#mask").hide();
        $("#pop").hide();


        // Size pop-up
        var img_w = 600;
        var img_h = 300;

        // width and height in css.
        $("#pop").css('width', img_w + 'px');
        $("#pop").css('height', img_h + 'px');

        // Get values ??from the browser window
        var w = $(this).width();
        var h = $(this).height();

        // Centers the popup  
        w = (w / 2) - (img_w / 2);
        h = (h / 2) - (img_h / 2);
        $("#pop").css("left", w + "px");
        $("#pop").css("top", h + "px");

        // Function to close the pop-up
        $("#close").click(function() {
            $("#pop").fadeOut('slow');
            $("#mask").fadeOut('slow');
        });
    });
</pre>

div弹出时禁用背景

2 个答案: