html5 弹窗输入理由,使用HTML5 dialog元素制作自定义弹窗

效果：

代码：

html：

打开窗口

消息提示框

你确定要退出？

确定

取消

css：

dialog{

padding:0;

border:none;

box-shadow:0px 1px 3px rgba(0,0,0,0.2);

width:50%;

border-radius:10px;

}

.header{

padding:10px;

color:#fff;

border-radius:10px 10px 0 0;

background:#50a8fa;

}

.content{

padding:30px 12px 30px 12px;

}

.footer{

background:#f9f9f9;

overflow:hidden;

border-radius:0 0 10px 10px;

padding-right:20px;

}

.footer .ok,.footer .cancel{

padding:10px;

float:right;

cursor:pointer;

}

.footer .ok:hover,.footer .cancel:hover{

background:#ededed;

}

javascript：

var dialog = document.getElementById("dia");

document.getElementById("btn").addEventListener("click",function(){

dialog.showModal();

});

document.querySelector(".cancel").addEventListener("click",function(){

dialog.close();

});

javascript控制dialog的打开和关闭：

打开：dialog.showModal();

关闭：dialog.close();