实现页面的div弹出提示窗

最新推荐文章于 2023-02-14 14:50:02 发布

清音Susunma

最新推荐文章于 2023-02-14 14:50:02 发布

阅读量1.1k

点赞数

分类专栏： html 文章标签：弹出框全屏幕居中

本文链接：https://blog.csdn.net/qq_27511945/article/details/71081480

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

此处实现了一个简单的全屏幕居中的弹出框，直接附上代码。
知识要点：z-index就是网页的z轴，用相对定位绝对定位把两个层重叠在一起，z-index的值越大，就越靠上，注意，z-index没有单位，z-index：99；这样写就够了

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .mask {
            border-radius: 10px;
            position: absolute;
            filter: alpha(opacity=60); background-color: #CECFC9;
            z-index: 1002;
            /*opacity:0.5; -moz-opacity:0.5;需要设置弹出窗口的透明度的时候打开*/
            color:black;
            text-align: center;
            /*margin:0 auto;*/
            width:250px;
            height:100px;
        }
    </style>
</head>

<body>
<div id="mask" class="mask" style="display:none;">
    <div><p><span id="content" ></span></p></div>
    <hr style="height:1px;border:none;border-top:1px solid #AAABA6;">
    <div ><button style="color:#0376F2;border:none;background-color: #CECFC9;width:50px;font-size: 16px;" onclick="hideTip()">好</button></div>
</div>
<div>
    <button onclick="showTip('测试')">点击弹出框</button>
</div>
<!--记得在此处修改jquery插件的文件地址-->
<script src="jquery.1.9.0.min.js"></script> 
<script type="text/javascript">
    var width = document.body.clientWidth;
    var height = document.body.clientHeight;

    function showTip(text){
        $('#mask').css('top', (height-100)/2);
        $('#mask').css('left', (width- 250)/2);
        $("#content").text(text);
        $("#mask").show();
    }
    //隐藏遮罩层
    function hideTip(){
        $("#mask").hide();
    }


</script>
</body>
</html>

清音Susunma

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现页面的div弹出提示窗

此处实现了一个简单的全屏幕居中的弹出框，直接附上代码。知识要点：z-index就是网页的z轴，用相对定位绝对定位把两个层重叠在一起，z-index的值越大，就越靠上，注意，z-index没有单位，z-index：99；这样写就够了
复制链接

扫一扫