实现一个弹窗
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>css-布局-弹窗</title>
<meta name="xiaowei" content="[email protected]">
<style type="text/css">
html,body{margin:0;padding:0;width:100%;height:100%;}
.backLayer{width:100%;height:2000px;}
.popup{
position:fixed; top:50%; left:50%;
transform:translate(-50%,-50%);
width:300px;
border:1px solid #cccccc;
border-radius:5px;
z-index:999;
}
.title{
position:relative;
padding-left:20px; padding-right:20px;height:40px;
/*line-height:40px;*/
/*font-size:14px ;
font-family:"微软雅黑";*/
font:14px/40px "微软雅黑";
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
background-color:#eeeeee;
}
.close{
position:absolute;
top:10px;
right:10px;
width:10px;
height:10px;
cursor:pointer;
}
.content{width：100%;padding:20px;background-color:#fff;font:12px "宋体";}
p{margin:0 0 20px 0; line-height:1.5;}
/*实现按钮水平居中方法二：
p{margin:0; line-height:1.5;}
.divBtn{text-align:center;}
.btn{
margin-top:20px;
width:80px;height:30px;
background-color:blue;
color:#fff;
text-align:center;
border-radius:5px;
}*/
.btn{
display:block;
margin:0 auto; /*实现按钮水平居中*/
width:80px;height:30px;
background-color:blue;
color:#fff;
text-align:center;
border-radius:5px;
}
.mask{
position:fixed;
top:0; left:0;
width:100%; height:100%;
z-index:990;
background-color:#000;
opacity:0.3;
}
</style>
</head>
<body>
<div class="backLayer">我是背景</div>
<div class="popup">
<div class="title">标题栏标题栏标题栏标题栏标题栏标题栏标题栏标题栏
<img class="close" src="../x.png" >
</div>
<div class="content">
<p>内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落内容区段落</p>
<!-- <div class="divBtn">
<button class="btn">确定</button>
</div> -->
<button class="btn">确定</button>
</div>
</div>
<div class="mask"></div>
</body>
</html>