87,910
社区成员
发帖
与我相关
我的任务
分享求助：jquery ui dialog无法挡住ie6下的select
我的页面代码是
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ui实例</title>
<link href="css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui-1.10.3.custom.min.js"></script>
</head>
<body>
<div id="city">点我弹出吧</div>
<div style="padding:100px 0 0 200px;">
<select >
<option>你能挡得住我吗？</option>
<option>马超：谁能挡我。杀------------------------------------------</option>
<option>张飞：杀------------------------------------------</option>
</select>
</div>
<div id="cityload" style="background-color:#0099FF; padding:15px; display:none">我是弹出的内容哦</div>
<script language="javascript">
//弹出城市窗口
$(document).ready(function(){
$('#cityload').dialog({
autoOpen: true,
height:600,
width: 900,
bgiframe: true , //解决下拉框遮盖div的bug
resizable: false, //dialog的大小不可以改变
draggable:false //dialog不可以拖动
});
});
</script>
</body>
</html>
不光如此， modal:true, //遮罩效果 ，这个在ie6下也失效
在ie8,ff,谷歌都正常，有没有遇到过相同问题的朋友，可有解决方法？
...全文
请发表友善的回复…
发表回复
createn 2013-12-24
- 打赏
- 举报
感谢楼上的兄弟。我用了你的第一个方法。隐藏所有select。看到有朋友用jquery.bgiframe.js也能实现。可惜我没能实现。希望有朋友贴一下源文件学习一下。下面是我测试通过后正确代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ui实例</title>
<link href="css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script language="javascript">
//弹出城市窗口
$(document).ready(function(){
$("#city").click(function(){
$('#cityload').dialog("open");
});
$('#cityload').dialog({
autoOpen: false,
height:600,
width: 900,
bgiframe: true,
modal:true,
closeOnEscape:true,
resizable: false,
draggable:false,
open:function(){
$("select").hide();
},close:function(){
$("select").show();
}
});
});
</script>
</head>
<body>
<div id="city">点我弹出吧</div>
<div style="padding:100px 0 0 100px;">
<select id="sss">
<option>你能挡得住我吗？</option>
<option>马超：谁能挡我。杀------------------------------------------</option>
<option>张飞：杀------------------------------------------</option>
</select>
</div>
<div id="cityload" style="background-color:#0099FF; padding:15px; display:none; position:relative">我是弹出的内容哦</div>
</body>
</html>
KK3K2005 2013-12-24
- 打赏
- 举报
弹出的时候隐藏所有的select
设置 visibility: hidden;
或者在弹出层添加一个iframe 用来提高显示级别
或者保证弹出框下面没有select
