自定义dialog弹窗html,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代码：

删除

效果展示：