div-点击DIV外任意地方隐藏此DIV 或点击iframe子页面中隐藏父页面DIV

问题描述

点击DIV外任意地方隐藏此DIV 或点击iframe子页面中隐藏父页面DIV

 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://www.pc120xz.cn/scripts/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div id="top" style="height:99px; border:1px solid #933; background-color:#999999;">
</div>
<div id="divmain">
  <iframe name="contentFrame" id="contentFrame" width="100%" height="500" allowtransparency="true" scrolling="no" border="0" frameborder="0" src="main.html" ></iframe>
</div>
<div id="bottom" style="height:99px; border:#06F solid 1px; background-color:#999999;">此处显示  id "bottom" 的内容</div>
<script type="text/javascript">
$("#contentFrame").load(function(){
var mainheight = $(this).contents().find("body").height();
$(this).height(mainheight);
});
$(document).ready(function(){
    $("#ListShow").bind("click",function(){
        $('#Main_pl1').animate({height:'show', opacity: 'show'}, 'normal',function(){
            $('#Main_pl1').show();
        });
        $('#ListShow').attr('style','display:none');
        $('#ListHide').attr('style','display:block');
        return false;
    });
    $("#ListHide").bind("click",function(){
        $('#Main_pl1').animate({height:'hide', opacity: 'hide'}, 'normal',function(){
            $('#Main_pl1').hide();
        });
        $('#ListShow').attr('style','display:block');
        $('#ListHide').attr('style','display:none');
    });
    $(document).bind("click",function(event){
        if($(event.target).isChildOf("#Main_pl1") == false){
            $('#Main_pl1').animate({height:'hide', opacity: 'hide'}, 'normal',function(){
                $('#Main_pl1').hide();
            });
            $('#ListShow').attr('style','display:block');
            $('#ListHide').attr('style','display:none');
        }
    });
    $.fn.isChildAndSelfOf = function(b){
        return (this.closest(b).length > 0);
    };
    $.fn.isChildOf = function(b){
        return (this.parents(b).length > 0);
    };
});
</script>
<div id="MainA1" style="position:fixed;left:0px;bottom:2px;_position:absolute;">
  <div id="Main_pl1" style="display:none;">
    <div class="Main_pl1m" style="width:400px; height:200px; background:#666666;">点击此DIV外任意地方隐藏此DIV 或点击iframe子页面中隐藏 父页面DIV</div>
  </div>
  <div id="Main_pm1" style="width:400px; height:120px;">
    <div class="Main_pm1m overz" style="border:#9CC solid 1px;">
              <span title="打开列表" id="ListShow" style="display:block;">测试这个</span>
                <span title="关闭列表" id="ListHide" style="display:none;">测试这个</span>
    </div>
  </div>
</div>在同一页面可以 但DIV浮动在iframe上时 失效
</body>
</html>

解决方案

之前不是回过你了？iframe和父页是不同的区域，点击iframe是无法响应父页的click事件的，用透明的层遮盖住iframe（跨域）或者没有跨域的情况下给iframe添加click事件隐藏div

     $("#contentFrame").load(function () {
        var mainheight = $(this).contents().find("body").height();
        $(this).height(mainheight);
                //////////////////////////////增加下面的代码触发父页绑定的click事件
        $(this).contents().click(function () {
            $(parent.document).trigger('click');
        });
                //////////////////////////////
    });

或者透明层遮盖住iframe


<div id="divmain" style="position:relative">
<div style="position:absolute;left:0px;top:0px;width:100%;height:100%;background:#000;filter:alpha(opacity=0);opacity:0"></div>
  <iframe name="contentFrame" id="contentFrame" width="100%" height="500" allowtransparency="true" scrolling="no" border="0" frameborder="0" src="http://www.baidu.com" ></iframe>
</div>

解决方案二：

添加document.onclick，判断点击对象，如果不是div，那就处理成隐藏

 <!DOCTYPE html>
<html>
<body>

<button  id='test'>点击这里</button>

<p id="demo"></p>

<script>
document.onclick=function(e){
 alert(e.target.id);
}
</script>

</body>
</html>

解决方案三：

实现鼠标点击div外的地方div窗口隐藏消失的
. 代码如下:

网页特效展示中心
.pop { width:200px; height:130px; background:#080;}

$(function(){
$(document).bind("click",function(e){
var target = $(e.target);
if(target.closest(".pop").length == 0){
$(".pop").hide();
}
})
})

解决方案四：

我看到y.qq.com可以的

jquery Div隐藏当DIV浮动在iframe上时隐藏失效
jquery Div隐藏 DIV浮动在iframe上时隐藏失效
javascript-怎样实现点击iframe导入页面中的按钮关闭这个iframe?
js-子页面查找父页面的div元素
div显示-如何在记事本上显示div隐藏代码
javascript-关于HTML&lt;iframe&gt;引入页面进行操控的问题
jsp 数据库弹框-jsp中数据库的数据传到页面上
javascript-如何实现先将div隐藏，点击特定按钮div就出现在特定位置
asp.net-为什么我的DIV隐藏后点击其他控件依然能显示出来？
隐藏子页滚动条-iframe 嵌套frameset，无法滚动

【云栖快讯】他，一路保送，但可能不是你想象中的学霸；他，曾是微软最年轻的技术管理者，挑战带领跨国团队；他，后来加入阿里，成为阿里西雅图分部的第22名员工；他，就是阿里通用计算平台负责人关涛！通过短视频，为你揭晓他的成长和开发计算平台的经历，以及他对未来的展望！详情请点击

div-点击DIV外任意地方隐藏此DIV 或点击iframe子页面中隐藏父页面DIV

问题描述

解决方案

相关文章

热门推荐