jQuery implémente la fonction d'affichage automatique du calque de masque lors de l'ouverture d'une page Web ou de partage de la fonction d'affichage du calque de masque en cliquant dessus.-js tutoriel-php.cn

jQuery implémente la fonction d'affichage automatique du calque de masque lors de l'ouverture d'une page Web ou de partage de la fonction d'affichage du calque de masque en cliquant dessus.

小云云

Libérer： 2018-05-22 10:44:17

original

3586 Les gens l'ont consulté

Cet article présente principalement la fonction de jQuery consistant à faire apparaître automatiquement le calque de masque lors de l'ouverture d'une page Web ou à faire apparaître le calque de masque en cliquant dessus. Cela implique des compétences opérationnelles liées à la réponse aux événements jQuery et aux attributs des éléments de fenêtre qui en ont besoin. je peux m'y référer. J'espère que cela pourra aider tout le monde.

Couche contextuelle : deux méthodes

L'une consiste à faire apparaître automatiquement le calque lors de l'ouverture de la page Web
L'autre consiste à cliquer pour faire apparaître une fenêtre contextuelle

<!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>

Copier après la connexion

Effet opérationnel :