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

一、正常页面

$(document).click(function(){
        $(dom).hide();//要隐藏的div
 });
 或者去除某一块
 $(document).on('click', function (e) {
		if ($(e.target).closest('#去除id').length == 0) {
			$("#隐藏id").hide();
		}
	});

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

// 点击弹窗内容以外的地方关闭弹窗
.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 方法();