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='
';
       t+=' 
';
       t+=' 
确定删除该信息？
';
       t+='
';
       t+='删除';
       t+='取消';
       t+='
';
       t+=' 
';
       t+='
';
       $(t).appendTo("body");
       $(".dialog_btn").click(function(){
           $(".dv_dialog_box").remove();
       });
 
   });

Html代码：

删除

效果展示：