Ein einfaches Beispiel für die Implementierung einer Maskenebene durch Jquery (d. h. das Popup-DIV ist ausgegraut und kann nicht bedient werden).
- 高洛峰Original
- 2016-12-24 15:17:361412Durchsuche
Jquery implementiert ein einfaches Beispiel für die Maskenebene (d. h. das Popup-DIV ist ausgegraut und kann nicht bedient werden)
<!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')">关闭</a></h2>
<div class="form">我是弹出对话框111111！！</div>
</div>
<!--遮罩层显示的DIV2-->
<div id="DialogDiv2" style="display:none">
<h2>弹出层<a href="#" id="btnClose2" onclick="closeDiv('DialogDiv2')">关闭</a></h2>
<div class="form">我是弹出对话框2222！！</div>
</div>
<!--遮罩层显示的DIV3-->
<div id="DialogDiv3" style="display:none">
<h2>弹出层<a href="#" id="btnClose3" onclick="closeDiv('DialogDiv3')">关闭</a></h2>
<div class="form">我是弹出对话框3333333！！</div>
</div>Der obige Artikel ist ein einfaches Beispiel für die Implementierung der Maske durch Jquery Die Ebene (das heißt, das Popup-DIV ist ausgegraut und kann nicht bedient werden) ist der gesamte vom Herausgeber freigegebene Inhalt. Ich hoffe, dass er Ihnen eine Referenz geben kann, und ich hoffe auch, dass Sie die chinesische PHP-Website unterstützen.
Einfachere Beispiele für die Implementierung von Maskenebenen durch JQuery (d. h. das Popup-DIV ist ausgegraut und können nicht bedient werden) finden Sie auf der chinesischen PHP-Website für verwandte Artikel!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Implementierung des Seiteneffekts „linkes Menü, rechter Inhalt“ basierend auf Ajax+divNächster Artikel：Implementierung des Seiteneffekts „linkes Menü, rechter Inhalt“ basierend auf Ajax+div