纯css实现全屏居中自适应对话框
版权声明：
本文为博主原创文章，转载请声明原文链接...谢谢。o_0。
更新时间：
2019-03-18 21:28:09
温馨提示：
学无止境,技术类文章有它的时效性,请留意文章更新时间,如发现内容有误请留言指出,防止别人"踩坑",我会及时更新文章
网页中会经常用到对话框,用的最多的就是直接用layer等插件实现的功能，但有时只想要一个简单的对话框功能不想要太多的其它代码，如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>标题</title>
<meta name="keywords" content="关键字" />
<meta name="description" content="描述" />
</head>
<body>
<style type="text/css">
.bg-shade {
position: fixed;
_position: absolute;
z-index: 998;
top: 0px;
left: 0px;
width: 100%;
_width: expression(document.documentElement.scrollWidth);
height: 100%;
_height: expression(document.documentElement.scrollHeight);
background: rgba(0, 0, 0, 0.8);
filter: alpha(opacity=50)
}
.dialog-wrap {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
left: 0px;
top: 0px
}
.dialog-wrap .dislog-con {
max-width: 90%;
background: #fff;
padding: 30px 20px 10px 20px;
font-size: 14px;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.dialog-wrap .dislog-con .close {
position: absolute;
right: 5px;
top: 0px;
display: block;
width: 30px;
height: 30px;
line-height: 30px;
cursor: pointer
}
#dialog-container img {
max-width: 100%;
}
</style>
<div id="my-dialog" style="">
<div class="bg-shade"></div>
<div class="dialog-wrap">
<div id="dialog-con" class="dislog-con">
<div class="close" onclick="this.parentNode.parentNode.parentNode.style.display='none';">关闭</div>
<div id="dialog-container">一个内容一个内容一个内容一个内容一一个内容个内容</div>
</div>
</div>
</div>
</body>
</html>
