html顶层弹出提示页面的实现

html代码：
包括遮罩层、弹出层

<div id="layer-mask" class="layer-mask"></div>
<div id="layer-pop" class="layer-pop">
    <div class="pop_text">
        Hello world Hello world Hello world!
    </div>
    <div class="pop_button_control">
        <div style="position: absolute; top:18px; right:153px;">
            <img id="pop_arrow"  src="{{ url_for('static', filename='arrow.png')}}" height="32" alt="skip"/>
        </div>
        <button id="pop_btn" class="pop_button" name="act" value="OK">3s</button>
    </div>
</div>

css:

.layer-mask{
    display: none;
    z-index: 99999;
    position: fixed;/*固定定位*/
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    opacity: 0.5;/*不透明度*/
}
.layer-pop{
    display: none;
    z-index: 100000;
    position: fixed;
    top: 0;/*居中显示*/
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width:440px;
    height:438px;
    box-shadow:0 5px 20px 0 #d9d9d9;
    border-radius:28px;
    background: #FFFFFF;
}
.pop_text{
    width:360px;
    height:134px;
    font-family:PingFangSC-Medium,  sans-serif;
    font-size:32px;
    color:#505050;
    letter-spacing:0;
    text-align:left;
    position:relative;
    top:102px; left:40px;
}
.pop_button_control{
    width:360px;
    height:68px;
    position:relative;
    top:136px; left:40px;
    text-align:right;
}
.pop_button {
    border: none;
    text-align: right;
    text-decoration: none;
    display: inline-block;
    font-size:28px;
    color:rgba(255,255,255,0.70);
    cursor: pointer;
    outline:none;
    width: 100%;
    height: 100%;
    background-color: #0088A8;
    background:#95c244;
    border-radius:8px;
    padding: 15px 92px
    }

jQuery显示页面：

$("#layer-mask").show();
$("#layer-pop").show();
$(".pop_text").html('some thing to show.’);

 

转载于:https://www.cnblogs.com/duduniya/p/10730335.html