Heim > Artikel > Web-Frontend > jQuery implementiert die Funktion zum automatischen Einblenden der Maskenebene beim Öffnen einer Webseite oder teilt die Funktion zum Einblenden der Maskenebene durch Klicken darauf.

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

小云云Original: 2018-05-22 10:44:173513Durchsuche

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>

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!

jquery JS 事件

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：Angular2 imitiert WeChat, um 9 Bild-Uploads und Vorschau-Beispielfreigaben zu implementierenNächster Artikel：Angular2 imitiert WeChat, um 9 Bild-Uploads und Vorschau-Beispielfreigaben zu implementieren

In Verbindung stehende Artikel

Mehr sehen