前端：两种实现带背景遮罩的弹窗写法

1.  第一种  使用css+jquery实现效果

直接上案例分析，下面一一列出样式文件和js文件以及html页面上的使用例子。

css文件如下：

.black_overlay{
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}
.dialog_content {
	display: none;
	position: fixed;
	top: 30%;
	left: 30%;
	background-color: white;
	z-index: 1002;
	overflow: auto;
	border: 5px solid #ADD8E6;
	padding: 10px 10px 10px 10px;
}

js文件如下：

/**
 * 弹出隐藏层
 * 
 * @param bg_div
 */
function ShowDiv(bg_div, show_div) {
	$("#" + bg_div).show();
	$("#" + show_div).show();
};
/**
 * 关闭弹出层
 * 
 * @param bg_div
 */
function CloseDiv(bg_div, show_div) {
	$("#" + bg_div).hide();
	$("#" + show_div).hide();
};
Html页面文件：

备注信息(请不要超过200字)


备注：




	

2.第二种： 使用jqModal插件实现

     jqModal资料网站：http://jquery.iceburg.net/jqModal/

        jqModal.js和jqModal.css 文件下载：

使用jqModal插件比较简单，样式和js都不需要自己实现，同样直接上案例分析：

Html页面文件：

	   
X

	
Js文件：




/**
*在js初始化，初始化jqModal插件
*/
$(function() {
			$('#alertBlock').jqm();
		})
/**
*直接做一个dialog调用函数；做一些操作
*/
dialog function(){
$("#alertBlock").jqmShow();
}