Maison > Article > interface Web > 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.

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.

小云云original: 2018-05-22 10:44:173552parcourir

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>

Effet opérationnel :

Recommandations associées :

Exemple de la façon d'empêcher le défilement de la page après le calque de masque

Qu'est-ce que le calque de masque à effets spéciaux js

recommande 10 utilisations de calques de masque couramment utilisées, bienvenue pour télécharger !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

jquery JS 事件

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Angular2 imite WeChat pour implémenter le téléchargement de 9 images et le partage d'exemples d'aperçuArticle suivant：Angular2 imite WeChat pour implémenter le téléchargement de 9 images et le partage d'exemples d'aperçu

Articles Liés

Voir plus