文章/答案/技术大牛

发布

社区首页 >问答首页 >灰度背景点击按钮显示弹出

问灰度背景点击按钮显示弹出
EN

Stack Overflow用户

提问于 2015-06-02 11:44:13

回答 2查看 1.9K关注 0票数 0

我有一个页面，点击按钮，它应该是灰色的，背景和弹出的信息应该显示在灰化的area..What im现在是弹出显示在单独的背景上是不灰的。这就是我应用的脚本和风格。

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

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

javascript

jquery

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-06-02 12:14:57

你的代码一团糟。

.live()不存在，我用.on()替换了它
我让你弹出的fixed代替了absolute，并正确定位了它
不使用不透明度，您应该使用半透明的背景颜色，否则元素的内容也变得半不透明。
我还清理了一下你的JS，让它更容易管理。
我还删除了您在“确定”按钮上的单击功能--我建议您不要在使用时考虑到用户的友好性。

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

Stack Overflow用户

发布于 2015-06-02 12:10:24

发现了两个问题：

看起来您使用的'live‘函数在jQuery 自1.9版起中不存在。所以，除非它来自其他图书馆，否则就是你的主要问题所在。
您的.messagepop div定位不正确，因此不会出现在屏幕上。您希望父元素具有position:relative，然后在.messagepop和top:0; left:0上设置position:absolute以正确地对齐它。

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/30595155

复制

相似问题

问灰度背景点击按钮显示弹出
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问灰度背景点击按钮显示弹出EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问灰度背景点击按钮显示弹出
EN