点击页面其他地方关闭弹出层

html：

<!DOCTYPE html><html>

<head>    <meta charset="UTF-8">    <title></title>    <style>        #div {            background: red;            width: 100px;            height: 100px;            display: none;        }    </style>    <script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>    <script type="text/javascript">        $(function () {            var oDiv = $("#div")[0];            var oBtn = $("#btn")[0];            document.onclick = function (ev) {                var e = ev || event;                var target = e.target || e.srcElement;                if (e.target.id != ‘div‘) //事件对象                {                    oDiv.style.display = "none";                }            }            oBtn.onclick = function (ev) {                var e = ev || event;                oDiv.style.display = "block";                if (e && e.stopPropagation) { //阻止冒泡                    e.stopPropagation();                } else {                    window.event.cancelBubble = true;                }            }        });    </script></head>

<body><div id="div"></div><input type="button" value=‘点击‘ id="btn"/></body>

</html>

result：

方法二：

html:

<!DOCTYPE html><html>

<head>    <meta charset="UTF-8">    <title></title>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <style type="text/css">        .popup {            background-color: #33CC99;            display: none;            width: 200px;            height: 200px;            /*position: absolute; left: 400px; top: 100px;*/            border: 5px solid #FF9999;            border-radius: 5px;            margin: 0 auto;            margin-top: 100px;        }

        .popup ul li {            line-height: 1.5em;        }    </style>    <script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>    <script type="text/javascript">    </script></head>

<body><div class="container">    <p>        <button id="btnPop" type="button">弹出div层</button>    </p>    <div id="popup" class="popup">        <ul>            <li><span>css</span></li>            <li><span>html</span></li>            <li><span>js</span></li>            <li><span>csharp</span></li>            <li><span>sql</span></li>        </ul>    </div></div><script type="text/javascript">    $(function () {        var oBtn = $("#btnPop")[0];        oBtn.onclick = showPopup;        function showPopup() {            document.getElementById("popup").style.display = "block";        }

        function hidePopup() {            document.getElementById("popup").style.display = "none";        }

        document.getElementById("popup").onclick = function (e) {            e = e || window.event;            if (window.event) {                e.cancelBubble = true;            } else {                e.stopPropagation();            }        };        document.body.onclick = function (e) {            e = e || window.event;            var target = e.target || e.srcElement;            if (target.id === "btnPop") return;            hidePopup();        };    })</script></body>

</html>

时间： 2024-10-23 18:28:45

点击页面其他地方关闭弹出层的相关文章

jQuery点击自身以外地方关闭弹出层

$(function(){ $(document).bind("click", function (e) { if($(e.target).closest("#txt").length>0){ $("#tip").show(); }else{ $("#tip").hide(); } }); }); closest会首先检查当前元素是否匹配,如果匹配则直接返回元素本身.如果不匹配则向上查找父元素,一层一层往上,直到找到匹配

jQuery弹出层_点击自身以外地方关闭弹出层

<html> <style> .hide{display:none;} </style> <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("div.do

点击页面其他区域隐藏弹出层

弹出层简称pop,隐藏方法有两种. 1. pop上阻止冒泡,document上click隐藏pop jquery实现 $("#showPop").on("click", function(e) { $("#pop").show(); $(document).one("click", function() { $("#pop").hide(); }); e.stopPropagation(); }); $(&

jQuery点击空白关闭弹出层

给宝箱加上click事件,单击切换弹出层显示与隐藏,弹出层显示后单机任何地方都能让它关闭. 这里用到了one()指令,给body绑定一个单次的操作,jQuery代码如下: $('#info li:eq(0)').click(function(){ $('#iphone').toggle(); $('body').one('click',function(){ $('#iphone').hide(); }) return false; }) 实际上该处应该是点击非自身的空白(弹出层也算自身)关闭弹

按esc键关闭弹出层

jquery中获取键盘按键测试浏览器:IE6/IE7/IE8,FireFox,Chrome,Opera $(document).keyup(function(e){ var key = e.which; if(key == 27){ alert('按下了ESC键,关闭弹出层'); } }); 或者(这个只在:IE8,FireFox,Chrome测试过) $(document).keyup(function(e){ if (e.keyCode == 27) { alert('按下了ESC键,关

layer关闭弹出层，弹出打印

常规的话,下面能够完成关闭弹出层 var index = parent.layer.getFrameIndex(window.name); //延迟关闭解决打印窗口弹不出来的情况 parent.layer.close(index); 可是当这里需要关闭的同时弹出打印窗口的时候,就会发现失效了,能关闭,可是打印窗口同时也弹不出了. 这里的解决办法就是:延迟关闭. $("#ReviewArea").jqprint({ debug: false, //如果是true则可以显示iframe查

jquery 点击弹出层自身以外的任意位置，关闭弹出层

<div class="mask"> <div class="wrap"></div> </div> /***弹出层效果***/ $(".header").find(".a5").click(function(e){ e.stopPropagation();//阻止冒泡 $('.mask').css("display"

layer实现关闭弹出层刷新父界面功能详解

方案一: 在layer弹出层中调用父界面重新加载函数 ? 1 2 3 window.parent.location.reload(); varindex = parent.layer.getFrameIndex(window.name); parent.layer.close(index); 方案二: 调用layer插件的end回调方法: end - 层销毁后触发的回调类型:Function,默认:null 无论是确认还是取消,只要层被销毁了,end都会执行,不携带任何参数. 父窗口打开lay

实现移动端弹出层弹出的时候页面不能滑动，关闭弹出层时页面恢复滑动

思路是:显示弹层时,禁用触摸事件在你显示弹出框的时候:添加: function ShowDiv() { window.ontouchmove = function(e) { e.preventDefault && e.preventDefault(); e.returnValue = false; e.stopPropagation && e.stopPropagation(); return false; } } 在关闭弹层时,添加: function CloseDiv