Heim > Artikel > Web-Frontend > jQuery implementiert die Beispielfunktion zum automatischen Einblenden der Maskenebene beim Öffnen einer Webseite oder zum automatischen Einblenden der Maskenebene beim Klicken darauf
jQuery implementiert die Beispielfunktion zum automatischen Einblenden der Maskenebene beim Öffnen einer Webseite oder zum automatischen Einblenden der Maskenebene beim Klicken darauf
- 韦小宝Original
- 2018-01-11 10:15:441862Durchsuche
In diesem Artikel wird hauptsächlich die Funktion von jQuery vorgestellt, mit der die Maskenebene automatisch angezeigt wird, wenn eine Webseite geöffnet wird. Dazu gehören die zugehörigen Bedienfähigkeiten der jQuery-Ereignisantwort und der Fensterelementattribute in jquery finden Sie in diesem Artikel
Das Beispiel in diesem Artikel beschreibt, wie jQuery beim Öffnen einer Webseite automatisch die Maskenebene öffnen oder klicken kann, um die Maskenebene anzuzeigen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Popup-Ebene: zwei Methoden
Eine besteht darin, die Ebene beim Öffnen der Webseite automatisch einzublenden
Die Die andere besteht darin, zum Popup zu klicken
<!DOCTYPE html>
<html>
<head>
<title>www.php.cn - jQuery简便实现遮罩层</title>
<meta charset="utf-8">
<style>
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin:0;
}
#main {
height:1800px;
padding-top:90px;
text-align:center;
}
#fullbg {
background-color:gray;
left:0;
opacity:0.8;
position:absolute;
top:0;
z-index:3;
filter:alpha(opacity=80);
-moz-opacity:0.5;
-khtml-opacity:0.5;
}
#dialog {
background-color:#fff;
border:5px solid rgba(0,0,0, 0.8);
height:400px;
left:50%;
margin:-200px 0 0 -200px;
padding:1px;
position:fixed !important; /* 浮动对话框 */
position:absolute;
top:50%;
width:400px;
z-index:5;
border-radius:5px;
display:none;
}
#dialog p {
margin:0 0 12px;
height:24px;
line-height:24px;
background:#CCCCCC;
}
#dialog p.close {
text-align:right;
padding-right:10px;
}
#dialog p.close a {
color:#fff;
text-decoration:none;
}
</style>
<script type="text/javascript" src="jquery/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
showBg();
});
</script>
<script type="text/javascript">
//显示灰色 jQuery 遮罩层
function showBg() {
var bh = $("body").height();
var bw = $("body").width();
$("#fullbg").css({
height:bh,
width:bw,
display:"block"
});
$("#dialog").show();
}
//关闭灰色 jQuery 遮罩
function closeBg() {
$("#fullbg,#dialog").hide();
}
</script>
</head>
<body>
<p id="main"><a href="javascript:showBg();" rel="external nofollow" >点击这里查看效果</a>
<p id="fullbg"></p>
<p id="dialog">
<p class="close"><a href="#" rel="external nofollow" onclick="closeBg();">关闭</a></p>
<p>正在加载，请稍后....</p>
</p>
</p>
</body>
</html>Das Obige ist der gesamte Inhalt dieses Artikels sowie der Quellcode. Ich hoffe, es hilft allen beim Lernen!
Verwandte Empfehlungen:
Über das jQuery-Scrolling-Plug-in scrollable.js Nutzungsanalyse
JQuery-Benutzer-Avatar-Zuschneide-Plug-in-Cropbox. js-Beispielfreigabe
Den Unterschied zwischen jquery und js teilen, um die Funktion „Alle auswählen“ zu realisieren
Das obige ist der detaillierte Inhalt vonjQuery implementiert die Beispielfunktion zum automatischen Einblenden der Maskenebene beim Öffnen einer Webseite oder zum automatischen Einblenden der Maskenebene beim Klicken darauf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!