弹出框

最新推荐文章于 2024-10-02 05:39:15 发布

aoxiaochun1220

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量70

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/XUYIYUAN/p/10315563.html

版权

坑爹的公司不用react、vue，现在用回jQuery，而且是前后端一体的，所以一个系列的插件使用起来有限制，像我这种喜欢阿里的ant-design的，此时突然想吐槽也是难免的。

css样式：

#divBody{
    width: 100%;
    height: 100%;
    z-index: 100;
    position: fixed;
    background: black;
    top: 0;
    left: 0;
    opacity: 0.1;
}
#promptContent{
    display: flex;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}
.prompt-content{
    margin: auto;
    width: 200px;
    min-height: 110px;
}
.prompt-content-image{
    width: 200px;
    height: 80px;
    background: #b45a24;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    display: flex;
}
.prompt-content-image>div{
    margin: auto;
}
.prompt-content-image img{
    width: 160px;
    height: 65px;
}
.prompt-content-word{
    min-height: 30px;
    background: #FFFFFF;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    display: flex;
    color: #8a8a8a;
    font-size: 14px;
    padding: 5px;
}
.prompt-content-word span{
    margin: auto;
}

js代码：

function promptBox(val) {
    var html = "";
    html += '<div id="divBody"></div>';
    html += '<div id="promptContent"><div class="prompt-content">';
    html += '<div class="prompt-content-image"><div><img src="images/company-logo.png"/></div></div>';
    html += '<div class="prompt-content-word"><span>'+ val +'</span></div>';
    html += '</div></div>';
    $("body").append(html);
    $("#promptContent").click(function () {
        $("#divBody,#promptContent").remove();
    });
}