生成一个漂亮的页面弹窗

效果图

css

<style type="text/css">
              *{
                 margin: 0px;
                    padding: 0px;
               }
          /* 弹出登陆框按钮 */
             #login-header{
                                     text-align: center;
                                  height: 30px;
                                     line-height: 30px;
                             }
            #login-header a{
                                    font-size: 24px;
                                    color: black;
                                }
             /* 登陆框主体 */
                .login{
                                  position: absolute;
                                    width: 512px;
                                   height: 384px;
                                      z-index: 9999;
                                      display: none;
                                     background-color: white;
                                     /* 这里要注意绝对定位的盒子怎么在屏幕显示居中 */
                                      left: 50%;
                                      margin-left: -256px;
                                     margin-top: 142px;
                                       border: 1px solid gray;
                                  }
               /* 登陆框标题 */
           .login-title{
                                    width: 100%;
                                    height: 40px;
                                       line-height: 40px;
                                     text-align: center;
                                  margin-bottom: 20px;
                                       cursor: move;
                                 }
             .login-title span a{
                                   text-decoration: none;
                                      border: 1px solid gray;
                                    font-size: 12px;
                                     color: black;
                                   border-radius: 20px;
                                     width: 40px;
                                       height: 40px;
                                      background-color: #fff;
                                      position: absolute;
                                      top: -20px;
                                    right: -20px;
                                    }

              /* 登陆表单 */
               .login-input{
                                    margin: 20px 0px 30px 0px;
                               }
             .login-input label{
                                      float: left;
                                   height: 35px;
                                     line-height: 35px;
                                 width: 90px;
                                       padding-left: 10px;
                                     text-align: right;
                                    font-size: 14px;
                               }
              .login-input input.list-input{
                                     height: 35px;
                                     line-height: 35px;
                                     width: 350px;
                                      text-indent: 5px;
                                }
            /* 登陆框登陆按钮 */
              .login-input select.list-input{
                  height: 35px;
                  line-height: 35px;
                  width: 350px;
                  text-indent: 5px;
              }
               .loginSubmit{
                                    width: 50px;
                                     height: 40px;
                                    text-align: center;
                                    border: 1px solid gray;
                                   background-color: white;
                                   margin-left: 120px;

                              }

          /* 遮盖层 */
             .bg{
                                      background-color: #000;
                                 width: 100%;
                                     height: 100%;
                                      top: 0px;
                                     position: fixed;
                                 opacity: 0.3;
                                    -webkit-opacity: 0.3;
                                     -moz-opacity: 0.3;
                                    display: none;
                                }
</style>

html

//页面弹出按钮  
<button type="button" class="btn" style="color: #fff;background-color: #c20e0e;border-color: #ff0d24;"  id="adminBtn" >
            <i class="fa fa-search"></i>  新增
        </button>
        <!-- 登陆框主体 -->
     <div id="login" class="login">
              <!-- 登陆框标题 -->
           <div id="login-title" class="login-title">
                新增接入号
                <span><a id="closeBtn" href="javascript:void(0)">关闭</a></span>
              </div>
               <!-- 登陆框表单 -->
           <div id="login-form">
                 <div class="login-input">
                     <label>接入号：</label>
                     <input type="text" placeholder="请输入接入号" class="list-input"/>
               </div>

                <div class="login-input">
                     <label>接入网元：</label>
                   <input type="text" placeholder="请输入接入网元码" class="list-input"/>
               </div>
               <div class="login-input">
                   <label>平&nbsp;&nbsp;&nbsp;台：</label>
                   <select id ="model_name2" name="modelName" class="list-input">
                       <option value="全部">全部</option>
                       <option value="在信">在信</option>
                       <option value="行业">行业</option>
                   </select>
               </div>
               <div class="login-input">
                   <label>负责人：</label>
                   <input type="text" placeholder="请输入负责人" class="list-input"/>
               </div>
             </div>
             <!-- 登陆框登陆按钮 -->
               <input type="submit"  id="loginSubmit" value="保存" class="loginSubmit"/>
         <input type="submit"  id="loginSubmit1" value="取消" class="loginSubmit"/>
           </div>
         <!-- 遮盖层 -->
       <div id="bg" class="bg">sada</div>

JavaScript

<script>
    var login=document.getElementById('login');
              var bg=document.getElementById('bg');
            // 1.点击"点击，弹出登陆框",弹出登陆窗口和遮盖层
             var adminBtn=document.getElementById('adminBtn');
             adminBtn.onclick=function(){
                     login.style.display="block";
                       bg.style.display="block";
                     return false;
                   }
              // 2.点击"关闭",隐藏登陆窗口和遮盖层
             var closeBtn=document.getElementById('closeBtn');
               closeBtn.onclick=function(){
                     login.style.display="none";
                  bg.style.display="none";
                    return false;
                 }
               // 3.鼠标拖拽功能
           var login_title=document.getElementById('login-title');
            login_title.onmousedown=function(e){
                       e = e || window.event;
                       var x=e.pageX || e.clientX +(document.body.scrollLeft || document.documentElement.scrollLeft);
                      var y=e.pageY || e.clientY +(document.body.scrollTop || document.documentElement.scrollTop);

                  var boxX=login.offsetLeft;
                    var boxY=login.offsetTop;

                  var mouse_in_boxX=x-boxX;
                  var mouse_in_boxY=y-boxY;

              document.onmousemove=function(e){
                              var x=e.pageX || e.clientX +(document.body.scrollLeft || document.documentElement.scrollLeft);
                         var y=e.pageY || e.clientY +(document.body.scrollTop || document.documentElement.scrollTop);

                          login.style.left=x-mouse_in_boxX+256+'px';
                             login.style.top=y-mouse_in_boxY-142+'px';
                      }
                 }
            login_title.onmouseup = function(){
                document.onmousemove=null;
                }

</script>