Maison > Article > interface Web > jQuery réalise la fonction d'afficher automatiquement le calque de masque lors de l'ouverture d'une page Web ou d'afficher le calque de masque en cliquant dessus

jQuery réalise la fonction d'afficher automatiquement le calque de masque lors de l'ouverture d'une page Web ou d'afficher le calque de masque en cliquant dessus

韦小宝original: 2018-01-11 10:15:441912parcourir

Cet article présente principalement la fonction de jQuery pour afficher automatiquement le calque de masque lors de l'ouverture d'une page Web ou cliquer pour faire apparaître le calque de masque. 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. dans jquery, vous pouvez vous référer à cet article.

L'exemple de cet article décrit la fonction de jQuery pour faire apparaître automatiquement le calque de masque lors de l'ouverture d'une page Web ou pour faire apparaître le calque de masque en cliquant dessus. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Couche contextuelle : deux méthodes

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

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

Ce qui précède représente tout le contenu de cet article, ainsi que le code source. J'espère que cela aidera tout le monde à apprendre !

Recommandations associées :

À propos de l'analyse de l'utilisation du plug-in de défilement jQuery scrollable.js

Plug-in de recadrage d'avatar de l'utilisateur JQuery cropbox. js exemple de partage

Partage de la différence entre jquery et js pour réaliser la fonction de sélection de tout

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!

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：Méthode JS pour implémenter la commutation du cycle de clics pour afficher le contenuArticle suivant：Méthode JS pour implémenter la commutation du cycle de clics pour afficher le contenu

Articles Liés

Voir plus