如何点击电脑空白处自动隐藏弹窗？
- 内容介绍
- 文章标签
- 相关推荐
本文共计169个文字，预计阅读时间需要1分钟。
预览CSS代码：.bg_b { display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.5); z-index: 9;}
.pop { width: 200px; height: 200px; background: ;}
html预览 css
.xxk{ display: none; } .bg_b{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.5); z-index: 9; } .pop{ width: 200px; height: 200px; background: #fff; position: fixed; top: 0; left: 0; z-index: 99; } js
$(document).ready(function(){ $(".preview").click(function(e){ e.stopPropagation(); $(".bg_b,.pop").removeClass('xxk'); var wh=window.innerHeight; var bh=$(".pop").height(); var ww=window.innerWidth; var bw=$(".pop").width(); var top=(wh-bh)/2; var left=(ww-bw)/2; $(".pop").css({"top":top,'left':left}); }); $(document).mouseup(function(e){ var _con = $('.pop'); // 设置目标区域 if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1 $(".pop,.bg_b").addClass("xxk"); // 功能代码 } }); });
本文共计169个文字，预计阅读时间需要1分钟。
预览CSS代码：.bg_b { display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.5); z-index: 9;}
.pop { width: 200px; height: 200px; background: ;}
html预览 css
.xxk{ display: none; } .bg_b{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.5); z-index: 9; } .pop{ width: 200px; height: 200px; background: #fff; position: fixed; top: 0; left: 0; z-index: 99; } js
$(document).ready(function(){ $(".preview").click(function(e){ e.stopPropagation(); $(".bg_b,.pop").removeClass('xxk'); var wh=window.innerHeight; var bh=$(".pop").height(); var ww=window.innerWidth; var bw=$(".pop").width(); var top=(wh-bh)/2; var left=(ww-bw)/2; $(".pop").css({"top":top,'left':left}); }); $(document).mouseup(function(e){ var _con = $('.pop'); // 设置目标区域 if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1 $(".pop,.bg_b").addClass("xxk"); // 功能代码 } }); });