原生js实现模板弹出框

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>登录确定提醒</title>
    <style>
    html,
    body {
        margin: 0;
        padding: 0;
        font-family: "微软雅黑";
    }
    .wrap-dialog {
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           font-size: 16px;
           text-align: center;
           background-color: rgba(0, 0, 0, .7);
           z-index: 999;
       }
       .dialog {
    				position: absolute;
    				background-color: #f5f5f5;
            /* margin: 20% auto; */
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            width: 360px;
            height: 280px;
            border-radius: 10px;
       }
       .dialog .dialog-header {
           height: 20px;
           padding: 10px;
           /* background-color: #F8F8F8; */
           border-bottom: 1px solid #eee;
           text-align: left;
       }
      .dialog-title{
           display: inline-block;
           width: 50px;
           margin-left: 0;
       }
       .dialog .dialog-body {
    				background-color: #FFFFFF;
           height: 150px;
           padding: 20px;
       }
       .dialog .dialog-footer {
    				border-top: 1px solid #eee;
           padding: 4px 8px 6px 8px;
           /* background-color: #f5f5f5; */
       }
       .dialog-btn {
           cursor: pointer;
           background: #ff5622;
           border: 1px solid #ff5622;
           border-radius: 5px;
           color: #fff;
               height: 28px;
               line-height: 28px;
               margin: 5px 5px 0;
               padding:0 25px;
       } 
       .dialog-hide {
           display: none;
       }
       .dialog-ml50 {
    				height: 30px;
    				line-height: 30px;
           margin-left: 260px;
           background: #00B4A9;
           color: #fff;
           border: 1px solid #dedede;
       }
       .closeBtn{
           display: inline-block;
           width: 20px;
           height: 20px;
           padding: 10px;
           line-height: 20px;
           text-align: center;
           /*background: red;*/
           color: #333;
           font-size: 12px;
           float: right;
           cursor:pointer;
           font-weight: bolder;
       }
        .closeBtn:hover{
           color: #A0A8B4;
        }
    			 .dialog-message{
    				 line-height: 30px;
    				 height: 30px;
    				 width: 100%;
    				 border: 1px #A0A8B4 solid;
    				 border-radius: 5px;
    				 margin-bottom: 5px;
    				 color: #000;
    				 font-size: 16px;
    				 background-color: #F5F7FA;
    				 text-align: center;
    			 }
    </style>
</head>
<body>
    <div class="wrap-dialog dialog-hide" id="dialog-hide">
            <div class="dialog" id="dialog">            
                <a class="closeBtn" id="closeBtn">X</a>
                <div class="dialog-header">
                    <span class="dialog-title">提示</span>                
                </div>
                <div class="dialog-body">
                    <div class="dialog-message" id="dialog-message">1</div>
    				<div class="dialog-message" id="dialog-message">2</div>
    				<div class="dialog-message" id="dialog-message">3</div>
    				<div class="dialog-message" id="dialog-message">4</div>
                </div>
                <div class="dialog-footer">
                    <input type="button" class="dialog-btn dialog-ml50" id="dialog-cancel" value="取消" />
                </div>
            </div>
        </div>
</body>
<script>
 
       var choose=function(id){
       		return document.getElementById(id);
       }
              //自定義部分
       window.confirm = function() {
       		 choose("dialog-hide").className = "wrap-dialog";
       		  // 确定按钮
       		 choose("dialog").onclick= function(e){
       			  if (e.target.className=="dialog-btn dialog-ml50"){
       				   choose("dialog-hide").className = "wrap-dialog dialog-hide";
       			  }
       		  };
       		  // 取消按钮
       		 choose("closeBtn").onclick = function(){
       			  choose("dialog-hide").className = "wrap-dialog dialog-hide";
       		  }
       }
    
     function submitHand(){
        confirm();
    }
   //页面打开自动弹出  
   submitHand();
</script>
</html>
原生js实现模板弹出框

猜你喜欢
