点击div外区域隐藏div操作(嵌套iframe页面)

一、正常页面

$(document).click(function(){$(dom).hide();//要隐藏的div});

这个是最基础的原型，如果是有弹窗和遮罩层的，点击遮罩层的部分关闭弹窗和遮罩层：

// 点击弹窗内容以外的地方关闭弹窗
.user-list-classify-mask：遮罩层
.user-list-classify：实际的小弹窗区域$(".user-list-classify-mask").on('click', function (e) {if ($(e.target).closest('.user-list-classify').length == 0) {$(".user-list-classify-mask").hide();} });因为遮罩层是覆盖了整个屏幕的，所以一般就遮罩住了触发的那个元素，所以这个就不用除去触发的元素了

还有一种是没有遮罩层，但是会同步出现很多弹窗的list：

.pops:触发弹窗的元素
.ellipsis-pop：一开始隐藏的定位弹窗
有很多td
css：
.report-operation-pop{
position:relative;
}
.report-operation-pop img{width:20px;cursor:pointer;
}
.ellipsis-pop{position:absolute;right:0;top:49px;width:120px;background:#fff;-webkit-box-shadow: 0 0 6px rgba(0,0,0,.15);box-shadow: 0 0 6px rgba(0,0,0,.15);-o-box-shadow: 0 0 6px rgba(0,0,0,.15);-ms-box-shadow: 0 0 6px rgba(0,0,0,.15);-moz-box-shadow: 0 0 6px rgba(0,0,0,.15);border-radius:3px;padding:10px;box-sizing:border-box;z-index:999;display:none;
}
html：
<td class="t-a-l report-operation-pop"><img src="../../../include/images/dian.png" class="pops"><div class="ellipsis-pop"><a class="operation-btn">删除</a><a class="operation-btn">详情</a>……很多按钮</div>
</td>
js：
//操作栏的点击事件$("#report_table").on("click",".pops",function(){$(this).next().toggle();//显示隐藏toggle$(this).parents('tr').siblings().find('.ellipsis-pop').hide();//只能一个pop显示，其他的pop隐藏var topH = $(this).parents('td').outerHeight();$(this).next().css('top',topH/2+8)//pop的top值为td的高度的一半+一个适当的错开值})$(document).on('click', function (e) {//点击除pop之外的区域隐藏pop弹窗 但是要把触发的···去掉，不然点击···pop就不会show了if ($(e.target).closest('.ellipsis-pop').length == 0 && $(e.target).closest('.pops').length == 0) {$(".ellipsis-pop").hide();} });

二、嵌套iframe页面 （我实现的是点击子页面隐藏父页面的元素）

除了写正常页面的操作之外，也需要在子页面里面写第二个操作

$(document).click(function(){//父页面$(dom).hide();//要隐藏的div});$(document).click(function(){//子页面$(dom,window.parent.document).hide();});

因为子页面里不能直接获取到父页面的元素，所以需要在子页面里面另外写：
$(dom,window.parent.document).hide();

补充：jquery中父子页面之间获取元素

父页面获取子页面元素：

$("#iframe的ID").contents().find("#iframe子页面的ID").click();

父页面调用子页面方法：

$("#iframe的ID")[0].contentWindow.子页面 js 方法();

子页面获取父页面元素：

$("#父页面元素ID" , parent.document);

子页面操作父页面方法：

window.parent.父页面 js 方法();

点击div外区域隐藏div操作(嵌套iframe页面)相关推荐

jquery点击非div区域隐藏div
点击非div区域隐藏div,如图,点击圆的头像(.person-msg)弹出白色底框(.person-centre).点击圆头像以外的区域隐藏白色底框 html代码 <div class=&qu ...
jquery点击按钮显示和隐藏div
[转]jquery点击按钮显示和隐藏DIv 1 function changeDisplay() { 2 if ($("#btnShow").attr("value&qu ...
点击按钮显示或隐藏Div块
通过点击按钮实现Div块在显示状态与隐藏状态之间来回切换. 代码如下: 方法一: <!DOCTYPE html> <html> <head><script s ...
js-点击div之外，隐藏div
点弹窗之外,隐藏弹窗,或点击div之外,隐藏div 其实原理总结就两句话: 给整个document添加监听点击事件,隐藏div 给div添加监听点击事件,阻止冒泡代码实现 html代码 <bo ...
Qt窗口点击窗口外区域自动关闭窗口
Qt自动关闭窗口的方式: 利用 Qt::Popup,可以实现点击窗口外区域自动关闭窗口: 利用 Qt::WA_NoMouseReplay,可以避免重复触发窗口外的鼠标点击事件(仅关闭窗口): 利用 a ...
jQuery点击网页任意空白区域隐藏div
JS代码: $(function () { $('#btnShow').click(function (event) { //取消事件冒泡 event.stopPropagation(); //按钮的 ...
html中怎么隐藏一下div,HTML怎么隐藏div
回答: div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白: 1 2 3 style="visibility:none;" document,getEl ...
原生JS实现点击一个按钮显示一个div，再点击按钮div隐藏，或点击除div外其它空白处div隐藏...
<!DOCTYPE html> <html style="font-size: 24px"> <head><title>js点击按钮 ...
vue点击其它区域隐藏
mounted() { //点击颜色其它区域隐藏 document.addEventListener('click', this.handleDocumentClick); document.addE ...

点击div外区域隐藏div操作(嵌套iframe页面)

点击div外区域隐藏div操作(嵌套iframe页面)相关推荐

最新文章

热门文章