一个简单的CSS弹出窗

      今天为大家介绍一款简单的弹出窗。大家在浏览网页的时候就会遇到某些提示信息或者是警告信息，这些信息也往往是以弹出窗的形式出现的。这些弹出窗口也往往是以浏览器默认的样式出现的，各个浏览器或者是手机网站渲染的效果也往往不同。下面做一个统一的弹窗框，可以根据根据自己的喜好自动调整。

      需要的技术支持：一般jQuery库；

HTML代码：

<div class="popup_back" style="display:none;"></div>
<div class="popup_window_first" style="display:none;">
	<p class="popup_cont">this is content.</p>
	<a href="javascript:void(0)" class="popup_btn" onclick="closeWindow();">确定</a>
</div>
<a href="javascript:void(0)" class="btn_click">点击这里</a>

CSS代码：

.popup_back{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.3);}
.popup_window_first{width: 280px;height: 150px;position: fixed;margin:auto;top: 0;bottom: 0;right: 0;left: 0;text-align:center;background: rgba(0,0,0,0.8);color: #fff;border-radius: 10px;}
.popup_window_first .popup_cont{width: 100%;height: 50%;border-bottom: 1px solid #fff;}
.popup_window_first .popup_btn{display: block;margin:0 auto;width: 60px;height: 30px;line-height:30px;text-decoration:none;color: #000;background: #fff;border-radius: 5px;}
.btn_click{display: block;width: 120px;height: 30px;line-height:30px;margin: 0 auto;color: #fff;background: rgba(0,0,0,0.5);text-align: center;text-decoration: none;border-radius: 5px;}

js代码：

function closeWindow(){
	$('.popup_back,.popup_window_first').hide();
}
$('.btn_click').click(function(){
	$('.popup_window_first,.popup_back').show();
});

演示效果如下：

未点击前：

点击后：

      其中有几个关键点，在这里也简单介绍一下：

      1.弹出层的定位：主要是position:fixed;在起作用，但要做到真正居中显示，还要加上margin:auto;top:0;bottom:0;left:0;right:0;这段css代码；

      2.遮罩层的设置：遮罩层的设置需要另外写一个块，如上代码所示。但要实现覆盖全屏，则要加上position:fixed;width:100%;height:100%;background:#333;这段css代码。position:fixed;让这个块脱离正常文档流，重新在body中定位，这里设置宽为100%和高为100%。实现遮罩层的效果；

      3.关闭弹出层：函数closeWindow实现关闭弹出层和遮罩层的效果，很简单，就不多说了。