Html5自定义dialog

Html5自定义dialog

Css样式:

.dv_dialog_box{
   top: 0px;
   width: 100%;
   height: 100%;
   z-index: 2000;
   position: absolute;
   background-color: rgba(0,0,0,0.6);
}
.dv_dialog{
   width: 300px;
   height: 100px;
   margin-left: 600px;
   margin-top: 300px;
   background-color: #fff;
   border-radius: 8px;
}
.dv_title{
   padding-left: 15px;
   width: 300px;
   height: 60px;
   font-size: 25px;
   line-height: 25px;
   font-family: "Microsoft YaHei";
}
.dv_btn{
   width: 300px;
   height: 30px;
}
.dialog_btn{
   width: 140px;
   height: 30px;
   border: 1px solid #858585;
   outline: none;
   border-radius: 6px;
   cursor: pointer;
   background-color: #fff;
   margin-left: 5px;
   font-family: "Microsoft YaHei";
}

Js代码:

 

$(".btn_delete").click(function(){
       var t='<div class="dv_dialog_box">';
       t+=' <div class="dv_dialog">';
       t+=' <div class="dv_title">确定删除该信息?</div>';
       t+='<div class="dv_btn">';
       t+='<button class="dialog_btn">删除</button>';
       t+='<button class="dialog_btn">取消</button>';
       t+='</div>';
       t+=' </div>';
       t+='</div>';
       $(t).appendTo("body");
       $(".dialog_btn").click(function(){
           $(".dv_dialog_box").remove();
       });
 
   });

Html代码:

<body>
<button class="btn_delete">删除</button>
</body>


效果展示:

Html5自定义dialog_第1张图片

你可能感兴趣的:(html5,前端自定义Dialog)