html+css部分：
JavaScript部分：
运行效果
代码也给你放上来，你自己复制过去运行看效果吧
<!DOCTYPEhtml>
<html>
<head>
<metacharset=”utf-8″/>
<title>模态对话框demo</title>
<styletype=”text/css”>
body,html{margin:0px;padding:0px;}
div.dialog{width:500px;height:300px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;
background:white;top:50%;margin-left:-250px;left:50%;margin-top:-150px;position:relative;box-sizing:border-box;}
#container{width:100%;height:100%;position:fixed;filter:alpha(opacity=50);
background-color:rgba(0,0,0,.5);left:0px;top:0px;display:none;}
#close_btn{font:bold28px/30px”microsoftyahei”;color:darkgrey;float:right;margin-right:5px;cursor:pointer;}
#open_diaog{border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;height:50px;width:150px;border:0px;
background:deepskyblue;font:bold6px/21px”microsoftyahei”;cursor:pointer;}
</style>
</head>
<body>
<buttonid=”open_diaog”>打开模态对话框</button>
<divid=”container”>
<divclass=”dialog”>
<spanid=”close_btn”title=”关闭”>×</span>
<h3>偶是模态对话框</h3>
</div>
</div>
<scripttype=”text/javascript”>
(function(){
varclose_btn=document.querySelector(‘#close_btn’);
varopen_diaog=document.querySelector(‘#open_diaog’)
close_btn.onmousemove=function(){
this.style.color=’red’;
}
close_btn.onmouseout=function(){
this.style.color=’darkgrey’;
}
close_btn.onclick=function(){
document.querySelector(‘#container’).style.display=’none’;
}
open_diaog.onclick=function(){
document.querySelector(‘#container’).style.display=’block’;
}
}())
</script>
</body>
</html>
有问题记得追问偶，觉得不错的点个赞，蟹蟹支持。
