Jquery 当div弹出时禁用后台_Jquery_Css_Background_Popup

Jquery 当div弹出时禁用后台

jquery css

Jquery 当div弹出时禁用后台,jquery,css,background,popup,Jquery,Css,Background,Popup,我想做的是，当我按下按钮并禁用背景时，将div显示为弹出窗口我的弹出窗口工作得很好，但当我尝试禁用背景时，问题出现了。为了做到这一点，我使用了名为“mask”的div，它必须占据整个身体。此div必须在开始时隐藏，并在有人按下按钮时显示问题是这个div（mask）从一开始就一直显示我一直在努力在互联网上寻找解决方案，我发现了以下链接：和第一个没有解决方案，第二个解决方案也不能解决我的问题这是我的.jsp文件： <%@ page language="java" contentT

我想做的是，当我按下按钮并禁用背景时，将div显示为弹出窗口

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

问题是这个div（mask）从一开始就一直显示

我一直在努力在互联网上寻找解决方案，我发现了以下链接：和

第一个没有解决方案，第二个解决方案也不能解决我的问题

这是我的.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>

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

以及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');
    });
});

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

您是否尝试在css中使用

display:none

，而不是在jQuery中使用函数

hide（）

，然后在

$（'#showBtn'）之后。单击使用函数show（）
在该函数中，只需转到您的弹出窗口
css，并将显示更改为阻止和停用回退。
出现两个错误。您在“掩码”div中使用了“显示弹出窗口”，该div没有显示。第二，对于您给出的关闭图标“z-index:2”，它应该大于显示在掩码顶部的掩码z-index



$（文档）.ready（函数（）{
$（'.minibtn'）。单击（函数（）{
//使用#掩码显示弹出窗口并禁用背景
$（“pop”）.fadeIn（'slow'）；
$（“#面具”）.fadeIn（'slow'）；
//加载内容。
$.post（“contentPopup.html”，函数（数据）{
$（“#contentPop”）.html（数据）；
});  
});  
//隐藏弹出窗口和遮罩
$（“#掩码”）.hide（）；
$（“#pop”）.hide（）；
//大小弹出窗口
var img_w=600；
var img_h=300；
//css中的宽度和高度。
$（“#pop”）.css（'width'，img#u w+'px'）；
$（“#pop”）.css（'height'，img#u h+'px'）；
//从浏览器窗口获取值
var w=$（this.width（）；
var h=$（this.height（）；
//使弹出窗口居中
w=（w/2）-（img_w/2）；
h=（h/2）-（img_h/2）；
$（“pop”）.css（“左”，w+“px”）；
$（“pop”）.css（“top”，h+“px”）；
//函数关闭弹出窗口
$（“#关闭”）。单击（函数（）{
$（“pop”）.fadeOut（'slow'）；
$（“#掩码”）.fadeOut（'slow'）；
});
});
你说得太对了！z索引参数错误，“掩码”div的位置也错误。现在，它工作得非常好：）谢谢！当然对不起，我以前没有做过：P顺便说一句，这就是我的jsp现在的样子：X。。。显示弹出窗口。。。非常感谢你的帮助。我试着按照你说的去做，但它对弹出窗口有效，但对面具无效，因为这个div的位置是错误的。这就是问题所在@维尼塔找到了它：）
<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>