A jQuery pop-up page effect that hides pop-up layers by clicking on blanks, pops-up layers by clicking buttons, and disappears JS code by clicking on pop-up layers in blanks.The main function is to click button pop-up layer display, and then click anywhere on the page to close the pop-up layer display effect, mainly the $(document).click operation application.Demo Demo , effect source:
CSS code:
* { padding: 0; margin: 0; } #btnShow{ margin: 100px auto 0; width: 90px; display: block; } #divTop{ 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 "Microsoft YaHei"; margin-top: -105px; margin-left: -200px; left: 50%; top: 50%; }
JS code:
$(function () { $('#btnShow').click(function (event) { //Cancel Event Bubble event.stopPropagation(); //Button toggle, if div is visible, click the button to switch to hidden; if hidden, switch to visible. $('#divTop').toggle('slow'); return false; }); //Hide the pop-up layer by clicking in the empty space. Below are the sliding disappearance effect and the fading disappearance effect. $(document).click(function(event){ var _con = $('#divTop'); // Set target area if(!_con.is(event.target) && _con.has(event.target).length === 0){ // Mark 1 //$('#divTop').slideUp('slow'); //slide disappears $('#divTop').hide(1000); //Fade out disappear } }); })
HTML code:<body> <input type="button" id="btnShow" value="pop-up button"/> <div id="divTop"> Click on the empty area pop-up layer to close! </div> </body>
After testing, clicking on the pop-up layer to close the page blank on the mobile Iphone phone is invalid. Doument writing is not supported. Solution: You can add a background layer to handle the page blank object.
Hide the pop-up layer by clicking in the blanks 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>Click in the blank to close the pop-up layer</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> <div id="box"></div> <span>Click here to open the pop-up layer</span><br>Click in the blank to close the pop-up layer </body> </html>