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

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页面文件：<div id="memoInfo" class="dialog_content" ><span><b>备注信息</b></span>(请不要超过200字)</br></br>备注：<textarea rows="2" cols="40" name="memoContent"  id="memoContent" ></textarea></br></br><input type="button" value="提交" onclick="memoApplyVip()" style="margin-left:60%;"><input type="button" value="取消" onclick="CloseDiv('memoInfobg','memoInfo')" style="margin-left:10%;"></div>

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

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

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

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

Html页面文件：

<div id="alertBlock" class="jqmDialog">   <span class="closeBox"><a href="javascript:$('#alertBlock').jqmHide();" class="jqmClose" style="text-decoration: none;">X</a></span></div>Js文件：<link href="/css/dialogModal.css" type="text/css" rel="stylesheet" /><script type="text/javascript" language="javascript" src="/js/jquery-1.8.1.js"></script><script type="text/javascript" language="javascript" src="/js/jqModal.js"></script>/***在js初始化，初始化jqModal插件*/$(function() {$('#alertBlock').jqm();})/***直接做一个dialog调用函数；做一些操作*/dialog function(){$("#alertBlock").jqmShow();}