jQuery implementiert die Beispielfunktion zum automatischen Einblenden der Maskenebene beim Öffnen einer Webseite oder zum automatischen Einblenden der Maskenebene beim Klicken darauf-js-Tutorial-php.cn

jQuery implementiert die Beispielfunktion zum automatischen Einblenden der Maskenebene beim Öffnen einer Webseite oder zum automatischen Einblenden der Maskenebene beim Klicken darauf

韦小宝

Freigeben： 2018-01-11 10:15:44

Original

1955 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!