本文主要是介绍实现一个弹窗，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>css-布局-弹窗</title>
<meta name="xiaowei" content="1464835043@qq.com">
<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>
这篇关于实现一个弹窗的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
