How to implement hidden element function in jquery-JS Tutorial-php.cn

How to implement hidden element function in jquery

亚连

Release： 2018-06-22 16:38:57

Original

2220 people have browsed it

This article mainly introduces the jquery method of hiding element p by clicking on the blank space and the implementation code. Let’s learn together.

When we develop websites, we often click on the blank space to hide existing elements, p or other elements. This time I will teach you how to use jquery to achieve this special effect.

A jQuery special effect to hide the pop-up layer when clicking on the blank space. Click on the button to pop up the layer. Click on the blank space on the page to disappear the pop-up layer. JS code. The main function is to click the button to display the pop-up layer, and then click anywhere on the page to close the pop-up layer display effect. It is mainly the operation application of $(document).click. Demonstration Demo, effect source code:

CSS code:

* { 
  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%;
 }

Copy after login

JS code:

 $(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);     //淡出消失
		 }
	});
 })

Copy after login

HTML code:

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

Copy after login

After testing, when clicking on the blank space of the page on the mobile phone Iphone, the pop-up layer is closed and fails, and the document writing method is not supported. , Solution: You can add a background layer as a page blank object.

Click on the blank space to hide the pop-up layer Case 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>

Copy after login

Let me share with you the code of the method of hiding the p area by clicking outside the p area in 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>

Copy after login

The above is I compiled it for everyone, I hope it will be helpful to everyone in the future.

How to implement single-layer json sorting in key alphabetical order (detailed tutorial)

About cli usage in vue Absolute path reference problem

How to modify the view label background color in the WeChat applet

How to reset the display mode of vue print variables ( Detailed tutorial)

The above is the detailed content of How to implement hidden element function in jquery. For more information, please follow other related articles on the PHP Chinese website!