一.实现弹窗原理：

弹窗的实现：

      (1)先写出一个div，弹出窗的样式，然后使用display样式进行隐藏；

      (2)当点击登录时，弹出窗口，这时display样式变为block

      (3)遮罩层的实现，使用一个div，让它占据整个屏幕，刚开始时隐藏，当点击登录时，遮罩层的display样式变为block,只是设计时，让遮罩层的z-index的值，小于弹窗的Z-index值，确保弹窗在屏幕的最上层。

      (4)弹窗位置的实现中，还使用了document.documentElement.clientHeight，document.documentElement.clientWidth，来实现随着屏幕大小的变化，使弹框始终位于屏幕的中间位置。

二.具体实现：

  html代码如下：

     
          
      
           
       
                
        
         
          庄园介绍                
          
           
            图片集                
            
             
              相关介绍        
             
        
            
             
              登录    
             
            
           
          
         
        
       
      
     
     
              
      
欢迎来到薰衣草庄园
         
      
放松自己，享受心情
 
      
      
            
       
        
         登录弹窗
        
     
       
                
        
                     
         
          用户名            
          
                           
           
                        
            
             密 码            
             
                              
              
               登 录            
               
                    
                
                 忘记密码|
                 
                  注册用户             
                  
                  
                 
                
               
              
             
            
           
          
         
        
       
      
     

css代码：

* {    margin: 0;    padding: 0;}body {    background: url("../img/login_bg.png");}/* 遮罩层的css实现 */#dropback {    position: absolute;    top:0;    left:0;    right:0;    bottom: 0;    background: #444;    z-index: 1000;    opacity: 0.9;    display: none;}/* 弹窗的css实现 */#login {    width: 300px;    height: 250px;    position: absolute;    border:1px solid #E5E5E5;    display: none;    z-index: 100;    color:#666;    border-radius: 4px;    z-index: 1020;    background: #fff;}/* 弹窗上关闭X号按钮的实现 */.close {    position: relative;    float:right;    top:3px;    right:5px;    padding:5px;    cursor: pointer;}/* 表单的css实现 */.form-group {    margin-bottom: 10px;    margin-left: 5px;}label {    display: inline-block;    width: 20%;}.form-control {    width: 70%;    height: 20px;    padding: 6px 0;    font-size: 14px;    line-height: 1.42857143;    letter-spacing: 2px;    color: #555;    background-color: #fff;    border: 1px solid #ccc;    border-radius: 4px;    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;}.form-control:focus {    border-color: #66afe9;    outline: 0;    box-shadow: inset 0 4px 4px rgba(0, 0, 0, .075), 0 0 8px #F9F8FE;}.btn {    display: inline-block;    width: 40%;    margin-left: 30%;    margin-top: 10px;    padding: 6px 12px;    margin-bottom: 0;    font-size: 14px;    font-weight: normal;    line-height: 1.42857143;    text-align: center;    white-space: nowrap;    vertical-align: middle;    cursor: pointer;    color: #fff;    background-color: #5cb85c;    border-color: #4cae4c;    border: 1px solid transparent;    border-radius: 5px;}.btn:focus {    color: #fff;    background-color: #449d44;    border-color: #398439;    text-decoration: none;}#other {    float:right;    margin-top:20px;}#other a {    color:#888;    text-decoration: none;}#other a:hover {    color:red;    text-decoration: none;}/* 整体的其他css样式实现 */header {    width: 100%;    height:50px;    background: #FFFEFE;    border:1px solid #E5E5E5;}img {    display: block;    float:left;  }ul {    list-style-type: none;    margin-left:150px;    text-align: center;}ul>li {    float:left;}ul>li>a {    display: block;    text-decoration: none;    padding:5px 30px;    color:#666;    letter-spacing: 2px;    line-height: 40px;}ul>li>a:hover {    color:#000;    background: #f1f1f1;}.login {    float: right;    margin-right: 30px;    padding: 15px 0;    letter-spacing: 2px;    cursor: pointer;}.login>a {    text-decoration:none;    color: #666;    display: block;}.login>a:hover {    transform: scale(1.5);    background: #f1f1f1;    color:#000;}#article {    width: 400px;    margin-left: 20px;}h3 {    color:white;    letter-spacing: 3px;    margin:12px;    text-align: center;    font-size: 32px;}h5 {    color:white;    letter-spacing: 3px;    margin:12px;    text-align: left;    font-size: 26px;    text-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);}h2 {    width: 100%;    height: 30px;    border-bottom: 1px solid #e5e5e5;    text-align: center;    margin-bottom: 25px;    letter-spacing: 2px;    color:#666;    background-color: #f1f1f1;    opacity: 0.8;}

js代码如下：

window.onload = function () {     var close = document.getElementsByClassName('close');    var login = document.getElementById('login');    var logins = document.getElementsByClassName('login');    var screen = document.getElementById('dropback');    var bodyobj = document.body;     function show(obj) {        //获取浏览器的宽和高        var top = (document.documentElement.clientHeight - 250) / 2 - 150;        var left = (document.documentElement.clientWidth - 300) / 2;        //当点击登录按钮时，登录弹窗出现，遮罩层显示        screen.style.display = 'block'; //遮罩层显示        obj.style.display = 'block'; //登录弹窗出现        obj.style.left = left + 'px'; //登录弹窗在屏幕中的位置        obj.style.top = top + 'px';     }     function hide(obj) {        //点击差号时，登录弹窗消失，遮罩层消失        obj.style.display = 'none';        screen.style.display = 'none';    }     close[0].addEventListener("click", function () {        hide(login)    }, false);    logins[0].addEventListener("click", function () {        show(login)    }, false); }

三.效果图展示

初始页面

点击页面登录：弹出窗口页面如下：

四.总结

   弹窗的是实现其实很简单，就是用display属性就可以解决，遮罩层也是控制其css属性，就可以实现。还有一点没有实现，就是弹窗会随着鼠标进行移动，这个在后续的学习中继续完成。