Js实例——模态框弹出层

1.描述

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

2、代码

DOCTYPE html>
<html>
  <head>
    <title>模态框弹出层.htmltitle>
    
    <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">
    
    
    <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

你可能感兴趣的:(Js实例——模态框弹出层)