<!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>
点击DIV外任意地方隐藏此DIV 或点击iframe子页面中隐藏 父页面DIV
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
4条回答 默认 最新
- Go 旅城通票 2015-01-21 01:18关注
之前不是回过你了?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>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
- ¥15 arduino控制ps2手柄一直报错
- ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
- ¥15 求chat4.0解答一道线性规划题,用lingo编程运行,第一问要求写出数学模型和lingo语言编程模型,第二问第三问解答就行,我的ddl要到了谁来求了
- ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
- ¥50 树莓派安卓APK系统签名
- ¥65 汇编语言除法溢出问题
- ¥15 Visual Studio问题
- ¥20 求一个html代码,有偿
- ¥100 关于使用MATLAB中copularnd函数的问题