snyviihc 2015-01-07 05:54 采纳率: 75%
浏览 3484
已采纳

jquery Div隐藏 当DIV浮动在iframe上时隐藏失效 

 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://www.pc120xz.cn/root/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="http://www.baidu.com/" ></iframe>
</div>
<div id="bottom" style="height:99px; border:#06F solid 1px; background-color:#999999;">此处显示  id "bottom" 的内容</div>
<script type="text/javascript"> 
$(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</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>
  • 写回答

2条回答 默认 最新

  • 斯洛文尼亚旅游 2015-01-07 07:22
    关注

    你是指点击iframe里面的内容无法隐藏弹出的div是吧？iframe和父页是不同的窗口，点击iframe是不会响应父页绑定的click事件的。。你可以用一个透明的层来遮盖在iframe上面。

    更加好的办法是透明层默认隐藏，你弹出div后再显示那个遮盖层，这样就可以操作iframe里面的内容了。如果iframe没跨域加载，你可以在iframe加载完毕后添加给iframe的document增加点击事件，隐藏父页的弹层

     <div id="divmain" style="position:relative">
<div style="width:100%;height:100%;background:#000;filter:alpha(opacity=0);opacity:0;left:0px;top:0px;position:absolute"></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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

悬赏问题

  • ¥50 寻找一位有逆向游戏盾sdk 应用程序经验的技术
  • ¥15 请问有用MZmine处理 “Waters SYNAPT G2-Si QTOF质谱仪在MSE模式下采集的非靶向数据” 的分析教程吗
  • ¥50 opencv4nodejs 如何安装
  • ¥15 adb push异常 adb: error: 1409-byte write failed: Invalid argument
  • ¥15 nginx反向代理获取ip，java获取真实ip
  • ¥15 eda：门禁系统设计
  • ¥50 如何使用js去调用vscode-js-debugger的方法去调试网页
  • ¥15 376.1电表主站通信协议下发指令全被否认问题
  • ¥15 物体双站RCS和其组成阵列后的双站RCS关系验证
  • ¥15 复杂网络，变滞后传递熵，FDA