今天项目里要在一个表格上 加一个dialog, 让信息能浮窗 可以被别的地方参考.
在Chrome里实现以后, 在IE里执行才发现问题 折腾我半天
一:原因
原因是jQueryUI不支持quirks mode
具体细节见: http://bugs.jquery.com/ticket/13339#comment:1
看url就知道是jQuery的bug列表, 人家明确回复: You're in quirks mode,
which jQuery doesn't support.
二:解决办法
1.在html第一行声明doctype
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/transitional.dtd">
这样就能让IE不使用混杂模式
这样单单jQueryUI的问题就解决了, 可是我项目里用的sigmaGrid默认的css就是用混杂模式写的
换成上面的声明表格就出不来....
2.万般无奈, 自己写了个css实现简单功能
贴出代码先放这, 回头css学精了再返回头来改吧...
/*==>July11 IE的dialog浮窗 */
.ui-dialog .ui-dialog-title{font: bold 16px;}
.ui-dialog .ui-dialog-titlebar{ background-color:#C0C0C0; }
.ui-draggable .ui-dialog-titlebar{cursor:move;height:30px;}
.ui-dialog .ui-dialog-titlebar-close{position:absolute;right:1%;width:20px;}
.ui-dialog .ui-dialog-content{background-color:#CCCCCC;overflow:auto}
/* 原始themes中提取出来的CSS
.ui-dialog{position:absolute;top:0;left:0;padding:.2em;outline:0}
.ui-dialog .ui-dialog-titlebar{padding:.4em 1em;position:relative}
.ui-dialog .ui-dialog-title{float:left;margin:.1em 0;white-space:nowrap;width:90%;overflow:hidden;text-overflow:ellipsis}
.ui-dialog .ui-dialog-titlebar-close{position:absolute;right:.3em;top:50%;width:21px;margin:-10px 0 0 0;padding:1px;height:20px}
.ui-dialog .ui-dialog-content{position:relative;border:0;padding:.5em 1em;background:0;overflow:auto}
.ui-dialog .ui-dialog-buttonpane{text-align:left;border-width:1px 0 0;background-image:none;margin-top:.5em;padding:.3em 1em .5em .4em}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset{float:right}.ui-dialog .ui-dialog-buttonpane button{margin:.5em .4em .5em 0;cursor:pointer}
.ui-dialog .ui-resizable-se{width:12px;height:12px;right:-5px;bottom:-5px;background-position:16px 16px}
.ui-draggable .ui-dialog-titlebar{cursor:move}
*/
<link rel="stylesheet" type="text/css" href="<%=basePath %>js/jQueryPlugins/jQueryUI/themes/ui-dialog-rt.css" /><!-- jquery-ui.min.css -->
<script type="text/javascript" src="<%=basePath %>js/jquery-1.7.1.min.js"></script>
<script src="<%=basePath %>js/jQueryPlugins/jQueryUI/ui/jquery-ui.js"></script>
<script type="text/javascript">
$(function(){
$('#dialogWrapper').hide();
$('#rxxxxxx1').click(function()
{
//==>1.赋值
$("#dialogWrapper p").text( $(this).text() );
//==>2.初始化显示
$("#dialogWrapper").dialog({
title: "修理周期结构预案",
modal: false,
//width: "360",
height: "1" , //==>IE必须设置高, 超过1自动拓展
resizable: true,
closeText: "x"
});
});
})
</script>
<!-- 浮窗 -->
<div id="dialogWrapper">
<p/>
</div>