前端：兩種實現帶背景遮罩的彈窗寫法

y_keven發表於2015-05-27
前端遮罩

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();
}



相關文章