How to discover hidden elements in blank spaces
This time I will show you how to discover hidden elements in blank spaces and what are the precautions for discovering hidden elements in blank spaces. Here are practical cases, let’s take a look.
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 web page special effect that hides the pop-up layer when you click on the blank space, pops up the layer when you click on the button, and disappears the JS code when you click on the blank space on the page. 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%;
}JS code:
$(function () {
$('#btnShow').click(function (event) {
//取消事件冒泡
event.stopPropagation();
//按钮的toggle,如果p是可见的,点击按钮切换为隐藏的;如果是隐藏的,切换为可见的。
$('#pTop').toggle('slow');
return false;
});
//点击空白处隐藏弹出层，下面为滑动消失效果和淡出消失效果。
$(document).click(function(event){
var _con = $('#pTop'); // 设置目标区域
if(!_con.is(event.target) && _con.has(event.target).length === 0){ // Mark 1
//$('#pTop').slideUp('slow'); //滑动消失
$('#pTop').hide(1000); //淡出消失
}
});
})HTML code:
<body> <input type="button" id="btnShow" value="弹出框按钮" /> <p id="pTop"> 点击空白区域弹出层关闭！ </p> </body>
<!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><!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>How jQuery controls dynamic page elements
How two zTree interact with each other
How does jQuery's Validate plug-in verify the input value
What to do if there is no reflection after the ajax request for background data is successful
The above is the detailed content of How to discover hidden elements in blank spaces. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Win11 input method floating window hidden settings
Dec 30, 2023 pm 11:24 PM
Some friends are not used to the floating window function of win11 input method, and it always feels strange to use, so they want to turn off this floating window function. Now I will introduce to you the correct operation method of closing the floating window in win11 system. Follow along. Win11 hides the input method floating window 1. Open the settings key of the computer, and then select "Time and Language". After entering, click "Enter" 2. Find "Switch Input Method" in "Advanced Keyboard Settings", and then change "Desktop Language" Click the check mark in front of "Bar", and then enter "Language Bar Options" 3. After opening, we click "Hide" here to close the language floating window.
How to hide Windows 11 taskbar icons?
Jan 06, 2024 am 08:38 AM
In the win11 system, if we find the icons in the taskbar troublesome, we can choose to hide them in the taskbar corner overflow interface. However, the icons in the taskbar of the application opened below cannot be hidden. Let’s follow the editor below. Let’s look at the specific situation. How to hide the win11 taskbar icon: 1. Center the icon 1. First, if we want to hide the icon in the taskbar below, we can right-click to select it and click "Unpin from taskbar" 2. But if we open this application and are in the process Use it and that's impossible to hide. 2. Icon in the lower right corner 1. If you want to hide the application icon in the lower right corner, first open the system settings. 2. Then click "Personalization" on the left sidebar, as shown in the picture. 3. Then click to enter the taskbar on the right
How to hide WeChat friends without blocking or deleting them? How to hide WeChat friends without blocking or deleting them
Mar 13, 2024 pm 07:19 PM
How to hide WeChat friends without blocking or deleting them? Many users want to hide some friends but don’t know how to do it. Let this site carefully introduce to users how to hide WeChat friends without blocking or deleting them. Methods to hide WeChat friends without blocking or deleting Method 1: 1. First open the WeChat software, find the address book on the WeChat page, and click "My". 2. Then we enter the settings page. 3. Find the “Privacy” option and click on it. 4. Then click "Don't let him see". 5. Go to the Do Not Let Her View page and click "+" to check the friends you want to hide.
How to hide works in Douyin short videos How to hide personal video works
Mar 12, 2024 pm 12:49 PM
There are many short video works provided in the Douyin short video app software. You can watch them as you like, and they are all permanently provided free of charge. Different types of live video channels are open, and all video content is original, with Give everyone the most satisfying way to watch. Enter your account to log in online, and a variety of exciting short videos will be pushed, which are accurately recommended based on what everyone watches every day. You can also enter the live broadcast room to interact and chat with the anchor, making you feel more happy. Works uploaded by individuals can also be hidden. It is very simple to set up with one click. You can see wherever you swipe. Swipe up and down to see the real-time comments of countless netizens. You can also share daily life dynamics. Now the editor has detailed online Douyin short videos. Users push for ways to hide personal video works. First open Douyin short video
How to hide Smart Island on Xiaomi Mi 14?
Mar 18, 2024 pm 03:40 PM
In addition to the amazing hardware configuration and excellent functions, Xiaomi Mi 14 also hides a fascinating place - Smart Island. Here, users can enjoy personalized customization and unlimited creative mobile phone experience. But not everyone likes this feature, so how does Xiaomi Mi 14 hide Smart Island? Let’s find out together. How to hide Smart Island on Xiaomi Mi 14? 1. Open the settings application of Xiaomi 14 mobile phone. 2. Scroll to find the "Features" option and click to enter. 3. Find the "Hide Smart Island" option on the features page and turn it on. 4. After confirming that hiding the Smart Island is turned on, return to the desktop and you will see that the Smart Island has been hidden.
Detailed tutorial on hiding works on Douyin
Mar 25, 2024 pm 03:11 PM
1. First click [+] to shoot. 2. Then click the check mark in the lower right corner to confirm the completion of shooting. Click] Next[, 3. Click [Who can see]. Just select [Private]. Scenario 2: The work has been taken. 1. Click [Me] and select [Work]. 2. Click the [three dots] logo on the right. 3. Swipe left to find [Permission Settings], 4. Click [Set as Private].
Where are the hidden games on steam?
Feb 24, 2024 am 11:37 AM
You can hide some games you don’t want to see in steam, so where are the hidden games? Players can click on the hidden game in the view to find their hidden game content. This introduction to the location of hidden games on Steam will tell you the specific method. The following is a detailed introduction, come and take a look! "Steam Usage Tutorial" Where are the hidden games in Steam? Answer: Click on the hidden game in the view. Specific methods: 1. First, click on the view in the software and click on the hidden game. 2. After clicking, you can see the hidden games in the menu on the left. How to hide games: 1. First click on your game library. 2. Select a game, right-click and select Manage. 3. Choose to hide this game.
How to deeply clean the hidden junk on your phone (completely remove junk from your phone's memory)
Jun 01, 2024 am 09:29 AM
Mobile phones have become an indispensable part of our daily lives, with the continuous advancement of technology and the popularity of smartphones. These junk files take up valuable storage space, and over time, a large amount of hidden junk will accumulate in the phone and cause the performance of the phone to degrade, however. Knowing how to deeply clean hidden junk on your phone has become essential knowledge for every mobile phone user. 1. Find and clear useless application caches 2. Delete applications that are no longer used 3. Clean photo and video cache 4. Thoroughly clean temporary files and download folders 5. Organize and clean contact and text message records 6. Clean system cache 7. Uninstall useless system applications 8. Clean browser cache and history 9. Delete invalid music and audio files 10. Optimize mobile phone file system
