您的位置：首页 > Web前端 > HTML5

Html5自定义dialog

2016-05-10 16:11 423 查看

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>

效果展示：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航