JavaScript+DIV制作弹出警告窗口效果

最新推荐文章于 2022-04-25 16:39:57 发布

悠悠隐于市

最新推荐文章于 2022-04-25 16:39:57 发布

阅读量563

点赞数

分类专栏： JavaScript 文章标签： JavaScript CSS HTML 工作 ViewUI

本文链接：https://blog.csdn.net/zhou363667565/article/details/83910421

版权

JavaScript 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

JavaScript+DIV制作弹出警告窗口效果

昨天没事，用JS+DIV制作弹出警告窗口效果。也涉及到一些CSS技术。下面是效果和源代码。欢迎大家转载。



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>心林小屋Java工作室-http://hi.baidu.com/362217990</title>
    <script>
    var win;
    var body;
    var bg;
    window.οnlοad=function(){
       win=document.getElementById("win"); //获取小窗口
       bg=document.getElementById("bg");//获取背景框
    body=document.body;//获取当前body  
     }
    
    function show(){
       document.body.scroll="no"; //隐藏当窗口的滚动条
    bg.style.width=body.clientWidth+"px"; //将背景框的宽度调到最宽
       bg.style.height=body.clientHeight+"px";//将背景框的高度调到最高
      
       win.style.display="block";//将小窗口显示
       bg.style.display="block";//将背景框显示
    }
    
    function hide(){
       document.body.scroll="auto";//当窗口的滚动条自动显示
       win.style.display="none";//将小窗口隐藏
       bg.style.display="none";//将背景框隐藏
    }

    </script>
    <style type="text/css">
    
    #win{
       position:absolute;
       border:1px solid #217AC1; 
       width: 250px;
       height: 120px;
       top:50%;
       left:50%;
    margin: -75px -110px;
       background-color: white;
       display: none;
    }
    
    #bg{
       filter:alpha(opacity=50);
       background-color: #99CCCC ;
       position: absolute;
       top:0px;
       left:0px;
       display: none;
    }
    
    
    </style>
</head>

<body>
   <span id="bg"></span>
    <div id="win">
       <div style="background-color: #EBF4FC;"><span style="color: #519FEE"> 友情提示:</span></div>
       <div align="center"><br><span οnclick="hide()">关闭窗口</span></div>
    </div>
    <a οnclick="show()" href="#">显示窗口</a>

   <a href="http://hi.baidu.com/362217990">TEST</a>
</body>
</html>