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!