Maison > Article > interface Web > Comment implémenter la fonction d'élément caché dans jquery

Comment implémenter la fonction d'élément caché dans jquery

亚连original: 2018-06-22 16:38:572193parcourir

Cet article présente principalement la méthode jquery pour masquer l'élément p en cliquant sur l'espace vide et le code d'implémentation. Étudions ensemble.

Lorsque nous développons des sites Web, nous cliquons souvent sur l'espace vide pour masquer les éléments existants, p ou d'autres éléments. Cette fois, je vais vous apprendre à utiliser jquery pour obtenir cet effet spécial.

Un clic jQuery sur l'espace vide pour masquer les effets spéciaux de la page Web du calque contextuel, cliquez sur le bouton pour faire apparaître le calque, cliquez sur l'espace vide de la page pour faire disparaître le calque contextuel JS code. La fonction principale est de cliquer sur le bouton pour afficher le calque contextuel, puis de cliquer n'importe où sur la page pour fermer l'effet d'affichage du calque contextuel. Il s'agit principalement de l'application opérationnelle de $(document).click. Démo, code source de l'effet :

Code CSS :

* { 
  padding: 0; 
	margin: 0; 
}
#btnShow{ 
  margin: 100px auto 0; 
	width: 90px; 
	display: block; 
}
#pTop{ 
  border: 2px solid #666666; 
	position: absolute; display: none; 
	width: 400px; 
	height: 200px; 
	color: #333; 
	background: #efefef; 
	padding-top: 10px; 
	text-align: center; 
	font: 16px/30px "微软雅黑"; 
	margin-top: -105px; 
	margin-left: -200px; 
	left: 50%; 
	top: 50%;
 }

Code JS :

 $(function () { 
   $(&#39;#btnShow&#39;).click(function (event) { 
     //取消事件冒泡 
     event.stopPropagation(); 
     //按钮的toggle,如果p是可见的,点击按钮切换为隐藏的;如果是隐藏的,切换为可见的。 
     $(&#39;#pTop&#39;).toggle(&#39;slow&#39;); 
		 return false;
   }); 
   //点击空白处隐藏弹出层，下面为滑动消失效果和淡出消失效果。
	 $(document).click(function(event){
		 var _con = $(&#39;#pTop&#39;);  // 设置目标区域
		 if(!_con.is(event.target) && _con.has(event.target).length === 0){ // Mark 1
			//$(&#39;#pTop&#39;).slideUp(&#39;slow&#39;);  //滑动消失
			$(&#39;#pTop&#39;).hide(1000);     //淡出消失
		 }
	});
 })

Code HTML :

<body>
<input type="button" id="btnShow" value="弹出框按钮" />
<p id="pTop">
 点击空白区域弹出层关闭！
</p>
</body>

Après test, sur l'Iphone mobile, cliquez sur l'espace vide de la page pour fermer le calque pop-up Invalide, l'écriture de document n'est pas prise en charge, solution : vous pouvez ajouter un calque d'arrière-plan en tant qu'objet de page vierge.

Cliquez sur l'espace vide pour masquer le calque pop-up Cas 2 :

<!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>点击空白处关闭弹出层</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#box{width:300px;height:200px;border:1px solid #000;display:none;}
.btn{color:red;}
</style>
<script type="text/javascript" src="http://www.internetke.com/public/js/jquery.js"></script>
<script type="text/javascript">
$(function(){
  $(".btn").click(function(event){
    var e=window.event || event;
    if(e.stopPropagation){
      e.stopPropagation();
    }else{
      e.cancelBubble = true;
    }  
    $("#box").show();
  });
  $("#box").click(function(event){
    var e=window.event || event;
    if(e.stopPropagation){
      e.stopPropagation();
    }else{
      e.cancelBubble = true;
    }
  });
  document.onclick = function(){
    $("#box").hide();
  };
})
</script>
</head>
<body>
<p id="box"></p>
<span class="btn">点击此处打开弹出层</span><br>点击空白处关闭弹出层
</body>
</html>

Je souhaite partager avec vous le code de la méthode de masquage de la zone p en cliquant à l'extérieur la zone p en js :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js" ></script>
<title></title>
</head>
<style type="text/css">
body
{
background-color:#999999;
} 
#myp
{
background-color:#FFFFFF;
width:250px;
height:250px;
display:none;
　　　　　　}
　　</style>
<body>
<input id="btn" type="button" value="显示p" />
 
<p id="myp">
This is a p;
</p> 
</body> 
<script type="text/javascript">
　　　　var myp = $("#myp");
$(function ()
{
$("#btn").click(function (event) 
{
showp();//调用显示p方法
$(document).one("click", function () 
{//对document绑定一个影藏p方法
$(myp).hide();
}); 
event.stopPropagation();//阻止事件向上冒泡
});
$(myp).click(function (event) 
{
event.stopPropagation();//阻止事件向上冒泡
});
});
　　　　function showp() 
{
$(myp).fadeIn();
}
</script>

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Comment implémenter le tri JSON monocouche par ordre alphabétique des clés (tutoriel détaillé)

À propos de l'utilisation de cli dans vue Problème de référence de chemin absolu

Comment modifier la couleur d'arrière-plan de l'étiquette de vue dans l'applet WeChat

Comment réinitialiser le mode d'affichage de vue print variables (Tutoriel détaillé)

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!

json jquery css html JS 对象 iphone 微信小程序

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：Comment implémenter le téléchargement d'images asynchrones en javascriptArticle suivant：Comment implémenter le téléchargement d'images asynchrones en javascript

Articles Liés

Voir plus