css html js 自定义弹窗

最新推荐文章于 2024-05-09 15:49:59 发布

jialan75

最新推荐文章于 2024-05-09 15:49:59 发布

阅读量338

点赞数

分类专栏： CSS 文章标签： css html javascript

本文链接：https://blog.csdn.net/jialan75/article/details/122835818

版权

CSS 专栏收录该内容

35 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            font-size: 13pt;
        }
        #bg{
            position: absolute;
            top:0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color:rgba(0,0,0,0.5);
            display: none;            
        }
        #box{

            width: 260px;
            position: absolute;
            z-index: 2;
            left: 50%;
            margin-left: -130px;
            top:50%;
            margin-top:-75px;
                        
   
            background-color: #fff;
        }
        #box .title{
            background-color: #008081;
            color:#fff;
            padding: 10px 20px;
        }
        #box .con{
            overflow: hidden;
 
        }
        #box .con .img{
            margin: 10px;
            float: left;
     
        }
        #box .con .rright{
            float: left;
            margin-bottom: 20px;
        }
        #box .con .rright .btn{
            text-align: center;
   
        }
        #box .con .rright .btn>button{
            width: 80px;
            height: 30px;
            font-size: 20px;
            border: none;
            background-color: #008081;
            color:#fff;
        }
    </style>
</head>
<body>
    <button id="btnShow">弹框</button>
    <div id="bg">
        <!-- 定义一个弹窗 -->
        <div id="box">
            <div class="title">
                提示
            </div>
            <div class="con">
                <div class="img">
                    <img width="100px" src="img/gantanhao.png" alt="">
                </div>
                <div class="rright">
                    <p>你真的要删除吗?</p>
                    <div class="btn">
                        <button id="cls">确定</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

<script>
    var btnShow = document.getElementById("btnShow");
    btnShow.onclick = function(){
        var bg = document.getElementById("bg");   
        var box = document.getElementById("box");   
        bg.style.display = 'block';
        box.style.display = 'block';

    }
    var btnCls = document.getElementById("cls");
    btnCls.onclick = function(){
        bg.style.display = 'none';
        box.style.display = 'none';
    }
</script>

jialan75

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css html js 自定义弹窗

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
复制链接

扫一扫

专栏目录