点击页面其他地方关闭弹出层
2016-06-16 19:44
573 查看
html:
result:
方法二:
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>
相关文章推荐
- HTML标签(二)
- 如何采集QQ群中所有成员QQ号码
- Go 字符串统计
- 二级联动
- toolbar menu 字体颜色和大小
- 调用Android中相机或图库选择图片并剪切
- HTML标签(一)
- MAC查看端口占用情况
- 微信企业号开发01 - 获取corpid 和 corpsecret
- cmake使用笔记
- centos session
- Neural Networks and Deep Learning 学习笔记(三)
- yarn资源管理器高可用性的实现
- QuickTest Professional(QTP): 连接Oracle数据库
- RecyclerView中item无法充满的问题
- Centos下Yum安装PHP5.5,5.6,7.0
- 初始化TableViewCell时获取到的宽度错误
- Three.js 中文文档和在线演示实例
- -数组类模板
- -数组类模板