自定义弹出框alert

最新推荐文章于 2024-04-14 16:21:13 发布

SuperYuHuoFei

最新推荐文章于 2024-04-14 16:21:13 发布

阅读量582

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/SuperYuHuoFei/article/details/77503023

版权

javascript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!--
    1. position:absolute时，若是相对于body定位，则是相对于浏览器窗口定位，而非整个网页；
       position:fixed始终是相对于浏览器窗口定位，此处用position:fixed，并将top、bottom、left、right都设为0，
       这样元素的宽高始终都与窗口宽高一致.

    2. 因为p是相对于popWin元素水平垂直居中定位，因为宽高始终都与窗口宽高一致，所以p也一直在窗口的中间位置
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义弹出框</title>
    <style>
        #popWin{
            position:fixed;
            top:0;
            bottom: 0;
            left: 0;
            right: 0;
            background: black;
            opacity: 0.5;
            display:none;
            border: 1px solid red;
        }

        #popWin p{
            position:absolute;
            /* 因为absolute定位使元素脱离了标准流，可以设置宽高 */
            width: 200px;
            height: 200px;
            left: 50%;
            top: 50%;
            margin-left: -100px;
            margin-top: -100px;
            text-align: center;
            font: 30px bold 微软雅黑;
            color:white;
        }
    </style>
    <script>
        function myalert() {
            var popWin=document.getElementById("popWin");
            popWin.style.display="block";
            popWin.οnclick=function () {
                this.style.display="none";
            };
        }

        window.alert=myalert;
    </script>
</head>
<body οnlοad="alert()">
<div id="popWin">
    <p>警告！</p>
</div>
<input type="button" value="弹出" οnclick="alert()">
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</body>
</html>