html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<meta content="" name="pgv">
<title>静态页面</title>
<script src="./jquery-1.8.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./static.css">
</head>
<body>
<div style="display:disabled;">
<div class="grey_background"></div>
<div class="tankuang_body">
<div class="tankuang_inner">
<div class="tankuang_hd">
<div class="tankuang_tit">标题</div>
</div>
<div class="tankuang_bd">
<p>内容。。。</p>
</div>
<div class="tankuang_btn">
<div class="border-top"></div>
<div class="border-left"></div>
<a class="canclebtn">取消</a>
<a class="okbtn">确定</a>
</div>
</div>
</div>
</div>
</body>
</html>
css
@charset "utf-8";
html{min-height:100%; font-size: 14px;}
body{font:14px/1.4 arial;color:#1a1a1a;-webkit-text-size-adjust:none;font-family:"Helvetica Neue","Microsoft Yahei","Hiragino Sans GB","Microsoft Sans Serif","WenQuanYi Micro Hei","sans-serif","Varela Round", "sans-serif" !important;background:#f0f0f0; }
/*grey background*/
.grey_background {
background-color: rgba(0, 0, 0, 0.7);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 11111;
}
/*弹框整体放置位置*/
.tankuang_body {
position: fixed;
left: 0;
right: 0;
top: 18%;
margin: 0 auto;
max-width: 56rem;
z-index: 2222222;
}
.tankuang_inner {
background-color: #fff;
padding: 0%;
margin: auto;
color: #000;
border-radius: 10px;
overflow: hidden;
width: 70%
}
.tankuang_tit {
line-height: 50px;
color: #ffffff;
font-size:18px;
text-align:center;
background-color: #00DBF5;
}
.tankuang_bd {
padding-top: 15px;
color: #000000;
font-size: 14px;
text-align: justify;/*justify两端对齐*/
}
.tankuang_btn .canclebtn,.tankuang_btn .okbtn {
width: 49%;
color: #00DBF5;
font-size: 17px;
display: inline-block;
line-height: 50px;
}
p{
padding: 10px 14px;
}
.p2{
padding-top: 0px;
}
.tankuang_btn {
text-align: center;
position:relative;
line-height: 50px;
}
.border-top{
border-top: 1px solid #dbdbdb;
position:absolute;
width: 100%;
}
.border-left{
border-left: 1px solid #dbdbdb;
position:absolute;
left:50%;
height: 100%;
}