Js实例——模态框弹出层

最新推荐文章于 2022-09-08 18:46:55 发布

weixin_30950607

最新推荐文章于 2022-09-08 18:46:55 发布

阅读量219

点赞数

原文链接：http://www.cnblogs.com/sylz/p/5723000.html

版权

1.描述

　　百度登录就是一个模态框弹出层。思路分析：先将灰色大背景和登陆盒子设为不可见，利用JS将其动态加载可见。

2、代码

<!DOCTYPE html>
<html>
  <head>
    <title>模态框弹出层.html</title>
    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <style>
        *{margin:0;padding:0;}
        body{
            width:100%;
            height:10000000px;
        }
        #mask{
            display:none;
            background:rgba(0,0,0,0.3);
            width:100%;
            height:100%;
            position:fixed;//利用固定定位的好处：页面还可以上下翻动，但是始终处于灰色背景下
        }
        #login{
            display:none;
            background:white;
            width:400px;
            height:250px;
            position:absolute;
            left:50%;
            top:50%;
            margin-left:-200px;
            margin-top:-125px;
        }
        #login #close_login{
            position:absolute;
            left:350px;
            top:10px;
            font-size:20px;
            width:20px;
            height:20px;
            background:skyblue;
            cursor:pointer;
        }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var btn=document.getElementById("btn");
            var mask=document.getElementById("mask");
            var login=document.getElementById("login");
            btn.onclick=function(){
                mask.style.display="block";
                login.style.display="block";
            };
            var close_login=document.getElementById("close_login");
            close_login.onclick=function(){
                mask.style.display="none";
                login.style.display="none";
            };
        };
    </script>
  </head>
  
  <body>
      <div id="mask"></div>
      <div id="login">
          <span id="close_login">×</span>
      </div>
      <a href="javascript:;" id="btn">请登录</a>
  </body>
</html>

转载于:https://www.cnblogs.com/sylz/p/5723000.html

weixin_30950607

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Js实例——模态框弹出层

1.描述　　百度登录就是一个模态框弹出层。思路分析：先将灰色大背景和登陆盒子设为不可见，利用JS将其动态加载可见。2、代码<!DOCTYPE html><html> <head> <title>模态框弹出层.html</title> <meta http-equiv="key...
复制链接

扫一扫