弹窗警告案例 - ScottJS

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            user-select: none;
        }

        .alert-box {
            width: 200px;
            height: 150px;
            background-color: #fff;
            border-radius: 5px;
            overflow: hidden;
            position: absolute;
            display: none;
            z-index: 110;
        }

        .alert-box h2 {
            background-color: rgb(61, 60, 60);
        }

        .alert-box p {
            font-size: 25px;
            margin: 20px auto;
        }

        #sure {
            margin-left: 50%;
        }

        .layer {
            width: 100%;
            height: 100%;
            background-color: rgba(138, 136, 136, 0.2);
            position: absolute;
            z-index: 100;
            display: none;
        }
    </style>
</head>

<body>
    <div class="layer"></div>
    <button type="button" id="err">点击</button>
    <div class="alert-box">
        <h2>警告</h2>
        <p>出现错误！！！</p>
        <button type="button" id="sure">确定</button>
    </div>
    <script src="./hxsdtools.js"></script>
    <script>

        var alertBox = document.querySelector('.alert-box');
        var errbtn = document.querySelector('#err')
        var layer = document.querySelector('.layer')


        showCenter(alertBox)
        errbtn.onclick = function () {
            alertBox.style.display = 'block';
            layer.style.display = 'block';

            alertBox.querySelector('#sure').onclick = function () {
                alertBox.style.display = 'none';
                layer.style.display = 'none';
            }
        }

    </script>

</body>

</html>

这里面引入了一个外部js，代码如下：

function showCenter(obj) {
    function center() {
        var scW = document.documentElement.clientWidth; //屏幕的宽和高
        var scH = document.documentElement.clientHeight;
        var boxW = obj.offsetWidth;
        var boxH = obj.offsetHeight;
        obj.style.left = (scW - boxW) / 2 + 'px';//记住要加'px'
        obj.style.top = (scH - boxH) / 2 + 'px';
    }
    center();
    window.onresize = function () {
       center();
    }
}

posted on 2020-06-30 08:17 ScottJS 阅读(199) 评论(0) 收藏举报

刷新页面返回顶部