Jquery實(shí)現(xiàn)遮罩層的簡(jiǎn)單實(shí)例(就是彈出DIV周圍都灰色不能操作)
Jquery實(shí)現(xiàn)遮罩層的簡(jiǎn)單實(shí)例(就是彈出DIV周圍都灰色不能操作)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Jquery遮罩層</title>
<style type="text/css">
#BgDiv{background-color:#e3e3e3; position:absolute; z-index:99; left:0; top:0; display:none; width:100%; height:1000px;opacity:0.5;filter: alpha(opacity=50);-moz-opacity: 0.5;}
#DialogDiv{position:absolute;width:400px; left:50%; top:50%; margin-left:-200px; height:auto; z-index:100;background-color:#fff; border:1px #8FA4F5 solid; padding:1px;}
#DialogDiv h2{ height:25px; font-size:14px; background-color:#8FA4F5; position:relative; padding-left:10px; line-height:25px;}
#DialogDiv h2 a{position:absolute; right:5px; font-size:12px; color:#000000}
#DialogDiv .form{padding:10px;}
#DialogDiv2{position:absolute;width:400px; left:50%; top:50%; margin-left:-200px; height:auto; z-index:100;background-color:#fff; border:1px #8FA4F5 solid; padding:1px;}
#DialogDiv2 h2{ height:25px; font-size:14px; background-color:#8FA4F5; position:relative; padding-left:10px; line-height:25px;}
#DialogDiv2 h2 a{position:absolute; right:5px; font-size:12px; color:#000000}
#DialogDiv2 .form{padding:10px;}
#DialogDiv3{position:absolute;width:400px; left:50%; top:50%; margin-left:-200px; height:auto; z-index:100;background-color:#fff; border:1px #8FA4F5 solid; padding:1px;}
#DialogDiv3 h2{ height:25px; font-size:14px; background-color:#8FA4F5; position:relative; padding-left:10px; line-height:25px;}
#DialogDiv3 h2 a{position:absolute; right:5px; font-size:12px; color:#000000}
#DialogDiv3 .form{padding:10px;}
</style>
<script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript">
function ShowDIV(thisObjID) {
$("#BgDiv").css({ display: "block", height: $(document).height() });
var yscroll = document.documentElement.scrollTop;
$("#" + thisObjID ).css("top", "100px");
$("#" + thisObjID ).css("display", "block");
document.documentElement.scrollTop = 0;
}
function closeDiv(thisObjID) {
$("#BgDiv").css("display", "none");
$("#" + thisObjID).css("display", "none");
}
</script>
</head>
<body>
<div id="BgDiv"></div>
<!--遮罩層顯示的DIV1-->
<div id="DialogDiv" style="display:none">
<h2>彈出層<a href="#" id="btnClose" onclick="closeDiv('DialogDiv')">關(guān)閉</a></h2>
<div class="form">我是彈出對(duì)話框111111?。?lt;/div>
</div>
<!--遮罩層顯示的DIV2-->
<div id="DialogDiv2" style="display:none">
<h2>彈出層<a href="#" id="btnClose2" onclick="closeDiv('DialogDiv2')">關(guān)閉</a></h2>
<div class="form">我是彈出對(duì)話框2222?。?lt;/div>
</div>
<!--遮罩層顯示的DIV3-->
<div id="DialogDiv3" style="display:none">
<h2>彈出層<a href="#" id="btnClose3" onclick="closeDiv('DialogDiv3')">關(guān)閉</a></h2>
<div class="form">我是彈出對(duì)話框3333333?。?lt;/div>
</div>
以上這篇Jquery實(shí)現(xiàn)遮罩層的簡(jiǎn)單實(shí)例(就是彈出DIV周圍都灰色不能操作)就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- JS遮罩層效果 兼容ie firefox jQuery遮罩層
- JQuery 遮罩層實(shí)現(xiàn)(mask)實(shí)現(xiàn)代碼
- jQuery操作dom實(shí)現(xiàn)彈出頁面遮罩層(web端和移動(dòng)端阻止遮罩層的滑動(dòng))
- jQuery阻止移動(dòng)端遮罩層后頁面滾動(dòng)
- jQuery實(shí)現(xiàn)簡(jiǎn)單網(wǎng)頁遮罩層/彈出層效果兼容IE6、IE7
- jQuery+AJAX實(shí)現(xiàn)遮罩層登錄驗(yàn)證界面(附源碼)
- jQuery點(diǎn)擊按鈕彈出遮罩層且內(nèi)容居中特效
- Jquery實(shí)現(xiàn)遮罩層的方法
- jQuery實(shí)現(xiàn)彈出帶遮罩層的居中浮動(dòng)窗口效果
- jQuery實(shí)現(xiàn)打開網(wǎng)頁自動(dòng)彈出遮罩層或點(diǎn)擊彈出遮罩層功能示例
- JavaScript實(shí)現(xiàn)的彈出遮罩層特效經(jīng)典示例【基于jQuery】
相關(guān)文章
jQuery實(shí)現(xiàn)table表格信息的展開和縮小功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)table表格信息的展開和縮小功能,涉及jQuery事件響應(yīng)及頁面元素遍歷、屬性修改相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
使用jQuery實(shí)現(xiàn)的擲色子游戲動(dòng)畫效果
大家一定都玩過擲色子的游戲,今天我給大家分享的是如何使用jQuery來實(shí)現(xiàn)擲色子的動(dòng)畫效果,通過jQuery的animate()自定義動(dòng)畫函數(shù)并結(jié)合CSS背景圖片切換實(shí)現(xiàn)的動(dòng)畫效果2014-03-03
jQuery中extend函數(shù)的實(shí)現(xiàn)原理詳解
這篇文章主要介紹了jQuery中extend函數(shù)的實(shí)現(xiàn)原理詳解,extend()函數(shù)用于jQuery插件的開發(fā),本文主要分析它的實(shí)現(xiàn)原理,需要的朋友可以參考下2015-02-02
jQuery EasyUI 獲取tabs的實(shí)例解析
左邊tree,右邊tabs。點(diǎn)擊tree增加相應(yīng)的tabs。下面通過一段代碼給大家解析,需要的朋友參考下吧2016-12-12
jQuery中toggleClass()方法用法實(shí)例
這篇文章主要介紹了jQuery中toggleClass()方法用法,實(shí)例分析了toggleClass()方法的功能、定義及對(duì)添加或移除匹配元素的一個(gè)或多個(gè)類進(jìn)行切換的使用技巧,需要的朋友可以參考下2015-01-01
解析jquery easyui tree異步加載子節(jié)點(diǎn)問題
本篇文章主要介紹解析jquery easyui tree異步加載子節(jié)點(diǎn)問題,easyui中的樹可以從標(biāo)記中建立,也可以通過指定一個(gè)URL屬性讀取數(shù)據(jù)建立,有興趣的可以了解一下。2017-03-03

