Question

我有一个页面，点击按钮它应该灰色背景，弹出消息应该显示在灰色区域..现在获得的是弹出显示在单独的背景上不是灰色的。这个脚本和样式我应用

<script>
    function deselect() {
        $(".pop").hide();
    }

    $(function () {
        $("#decline").live('click', function () {
            $(".pop").css({ "display": "block", opacity: 0.7, "width": $(document).width(), "height": $(document).height() });
            $(".pop").show();
        });

        $("#close").live('click', function () {
            deselect();
            return false;
        });

    });
</script>

<style type="text/css">
    .messagepop {
        background-color: #FFFFFF;
        border: 1px solid #999999;
        cursor: default;
        display: none;
        margin-top: -39em;
        margin-left: 26em;
        position: absolute;
        text-align: left;
        width: 394px;
        z-index: 50;
        padding: 25px 25px 20px;
    }

    .popuptxt {
        display: block;
        margin-bottom: 3px;
        padding-left: 15px;
        text-indent: -15px;
        font-weight: 700;
    }

    .popupbtn {
        padding-top: 15px;
        padding-left: 135px;
    }

    .messagepop p, .messagepop.div {
        border-bottom: 1px solid #EFEFEF;
        margin: 8px 0;
        padding-bottom: 8px;
    }
</style>

这是html代码

<input id="decline" type=button name="Decline" value="Decline">
    <div class="messagepop pop">
        <span><font class="popuptxt">By clicking decline, download will not occur, and window will close</font></span>
         <div class="popupbtn">
         <input type="button" name="Ok" class="btn btn-sm  btn-orange" value="<%=labelutils.printTranslatedValues("Ok")%>" onclick="window.open('', '_self', ''); window.close();">
         <input id="close" type="button" name="Cancel" class="btn btn-sm btn-gray-dark"  value="<%=labelutils.printTranslatedValues("Cancel")%>">
         </div>
    </div>

Answer 1

你的代码很乱。

.live（）不存在，我用.on（）
我制作了您的弹出广告fixed而不是absolute并正确定位
您应该使用半透明背景颜色，而不是使用不透明度，否则元素的内容也会变为半透明。
我还清理了你的JS，以便更容易管理。
我还删除了那个OK按钮上的点击功能 - 我建议不要在用户友好时使用它

＆＃13;

function deselect() {
    $(".pop").hide();
    return false;
}

function select(){
    $(".pop").css({
        display: "block",
        opacity: 1,
        width: $(document).width(),
        height: $(document).height()
    });
    $(".pop").show();
}

$(function () {
    $("#decline").on('click', select);
    $("#close").on('click', deselect);
});

＆＃13;

.messagepop {
    background-color:rgba(255,255,255,.7);
    border:1px solid #999999;
    cursor:default;
    display:none;
    position:fixed;
    top:0;
    left:0;
    text-align:left;
    width:394px;
    z-index:50;
    padding: 25px 25px 20px;
}
.popuptxt {
    display: block;
    margin-bottom: 3px;
    padding-left: 15px;
    text-indent: -15px;
    font-weight: 700;
}
.popupbtn {
    padding-top: 15px;
    padding-left: 135px;
}
.messagepop p, .messagepop.div {
    border-bottom: 1px solid #EFEFEF;
    margin: 8px 0;
    padding-bottom: 8px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="decline" type=button name="Decline" value="Decline">
    
<div class="messagepop pop">
    <span>
        <font class="popuptxt">
            By clicking decline, download will not occur, and window will close
        </font>
    </span>
    <div class="popupbtn">
        <input type="button" name="Ok" class="btn btn-sm  btn-orange" value="OK">
        <input id="close" type="button" name="Cancel" class="btn btn-sm btn-gray-dark" value="Cancel">
    </div>
</div>

＆＃13;

Answer 2

发现了两个问题：

看起来jQuery since version 1.9中不存在您正在使用的“实时”功能。所以除非它来自其他一些图书馆，否则那就是你的主要问题所在。
您的.messagepop div未正确定位，因此未显示在屏幕上。您希望父元素包含position:relative，然后在position:absolute和.messagepop上设置top:0; left:0以使其正确对齐。

这里的基本工作版本：http://jsfiddle.net/xj3pL213/

Greyout背景onclick按钮显示弹出窗口

2 个答案: