使用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();