版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/tianyazaiheruan/article/details/46051149
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();
}