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

jQuery implementiert die Funktion zum automatischen Einblenden der Maskenebene beim Öffnen einer Webseite oder teilt die Funktion zum Einblenden der Maskenebene durch Klicken darauf.

小云云

Freigeben： 2018-05-22 10:44:17

Original

3551 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die Funktion von jQuery vor, die Maskenebene beim Öffnen einer Webseite automatisch anzuzeigen oder die Maskenebene durch Klicken darauf anzuzeigen. Dazu gehören die zugehörigen Bedienfähigkeiten der jQuery-Ereignisantwort und der Fensterelementattribute, die sie benötigen Ich kann darauf verweisen. Ich hoffe, es kann allen helfen.

Pop-up-Ebene: zwei Methoden

Eine besteht darin, die Ebene beim Öffnen der Webseite automatisch einzublenden
Die andere besteht darin, zum Einblenden zu klicken

<!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>
<title>www.jb51.net - 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

Betriebseffekt:

Verwandte Empfehlungen:

Beispiel, wie verhindert werden kann, dass die Seite nach der Maskenebene scrollt

Was ist js Spezialeffekt-Maskenebene?

empfiehlt 10 häufig verwendete Maskenebenenverwendungen, willkommen zum Download!

Das obige ist der detaillierte Inhalt vonjQuery implementiert die Funktion zum automatischen Einblenden der Maskenebene beim Öffnen einer Webseite oder teilt die Funktion zum Einblenden der Maskenebene durch Klicken darauf.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!