前端应用_js_定时弹出框操作

最新推荐文章于 2022-08-26 19:01:00 发布

上海_彭彭

最新推荐文章于 2022-08-26 19:01:00 发布

阅读量855

点赞数 1

分类专栏： javascript 文章标签： JavaScript 定时弹出框

本文链接：https://blog.csdn.net/qq_34979346/article/details/98476096

版权

javascript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

预期结果为：
点击click 定时弹出一个框，并且有个灰色的罩子罩住页面，防止点击弹出框以外的内容，
并且罩子不能罩住弹出框。
效果如下：

在这里插入图片描述
代码如下：

<!doctype html>
<html lang="en">
<head>
      <meta charset="UTF-8">
    <title>弹出框练习</title>
    <style  type="text/css">
        .pop{
        width:400px;
        height:200px;
        border:5px solid #000;
        background-color:red;
        left:50%;
        top:50%;
        margin-left:-200px;
        margin-top:-100px;

        z-index:9;
        position:fixed;
        display:none;
        }
       .sun{
       position:fixed;
       background-color:#000;
       width:100%;
       height:100%;
       left:0;
       top:0;
       opacity:0.3;
       z-index:4;
       display:none;
       }

    </style>
    <script type="text/javascript">
        window.onload=function(){
        var pop=document.getElementById("btn")
        var sun=document.getElementById("btn1")
        var button=document.getElementById("button")

        button.onclick=function(){

        setTimeout(myalert,4000);
        }
        function myalert(){
        pop.style.display="block";
        sun.style.display="block";
        }
        }
   </script>
</head>
<body>
<input type="button" id="button" value="Click">

<div id="btn" class="pop" display="none">弹出框</div>
<div id="btn1" class="sun" display="none"></div>
</body>
</html>