灰色背景，点击按钮显示弹出窗口

Greyout background onclick of button to display popup

本文关键字：显示 窗口 按钮 背景 灰色      更新时间：2023-09-26

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

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

你的代码一团糟。

  • .live()不存在，我将其替换为。on()
  • 我将你的弹出框设置为fixed而不是absolute，并正确定位
  • 不要使用不透明度，你应该使用半透明的背景色，否则元素的内容也会变成半透明的。
  • 我也清理了你的JS一点点，使其更容易管理。
  • 我还删除了ok按钮上的点击功能-我建议不要使用该功能，考虑到用户友好性

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);
});
.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;
}
<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>

发现两个问题:

  1. 看起来你正在使用的'live'函数从1.9版开始就不存在了。所以除非它来自其他库，否则这就是你的主要问题所在。

  2. 您的.messagepopdiv没有正确定位，因此不会显示在屏幕上。你想让父元素有position:relative，然后将position:absolute设置为.messagepop和top:0; left:0，以正确对齐。

基本工作版本:http://jsfiddle.net/xj3pL213/

相关文章：