用js自定义弹窗

代码如下：
<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--定义弹窗的样式-->
    <style>

        .popup {
            width: 100vw;
            height: 100vh;
            background-color: rgba(0, 0, 0, .5);
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            display: none;
            justify-content: center;
            align-items: center;
        }

        .popup-content {
            width: 400px;
            height: 200px;
            background-color: #fff;
            box-sizing: border-box;
            padding: 10px 30px;
            color: black;
        }

        .top {
            width: 100%;
            border-bottom: 1px solid black;
        }

        .info {
            margin-top: 50px;
        }

    </style>
    <script>
        //给定一个值,使点确定为true,点其他为false
        var isDelete = false;

        function showPopup() {
            document.getElementById("popup").style.display = "flex";
        }

        // 传一个参数，把true和false传进去
        function hidePopup(x, e) {
            //处理冒泡
            //event 的 cancelable 事件返回一个布尔值 。
            // 如果返回的是undefined，则是除确定以外的区域，反之是确定按钮（因为取消和其他区域，没传值默认undefined）
            if (e != undefined) {
                e.cancelBubble = true;
            }
            document.getElementById("popup").style.display = "none";
            isDelete = x;
            console.log(x);
        }
    </script>
</head>
<body>
<!--给定一个按钮来显示弹窗-->
<button type="button" onclick="showPopup()">弹窗</button>
<!--给出弹窗的内容-->
<!--弹窗点击除确定以外的取消和其他区域时弹窗都会消失且输出false，点击确定时为true-->
<div class="popup" id="popup" onclick="hidePopup(false)">
    <div class="popup-content">
        <div class="top">
            <p>提示信息</p>
        </div>
        <div class="info">
            <p>确认关闭？</p>
        </div>
        <div class="btn">
            <!--因为两个按钮在popup这个大框里，点击确定和取消就会同时点击父元素，
            会产生事件冒泡（即点击确定，会同时出现true和false）-->
            <button type="button" onclick="hidePopup(true,event)">确定</button>
            <button type="button" onclick="hidePopup(false)">取消</button>
        </div>
    </div>
</div>


</div>

</body>
</html>
用js自定义弹窗

猜你喜欢
