jQuery对话框与960网格系统
jQuery对话框与960网格系统
提问于 2011-02-28 03:12:28
我有以下使用960网格系统的页面布局
----------------
header
-----------------
|
|
side| main
|
|
-----------------我想使用jQuery对话框在用户单击侧边菜单中的链接时显示弹出窗口。但是，不管我怎么尝试，对话框的标题栏总是显示为充满整个屏幕。我试着设置对话框的高度、maxHeight和zIndex，但都不起作用。我想要的就是让对话框显示在屏幕的中央，当我没有包含960 css的时候，这是可行的，但是我失去了我的布局。
我是不是漏掉了什么？
我在对话框中使用的代码是：
var $aboutDialog = $("#aboutDialog")
.dialog({
autoOpen: false,
draggable: false,
width: 640,
height: 'auto',
resizable: false,
position: 'center',
modal: true,
zIndex: 4,
buttons: [
{
text: "Ok",
click: function() { $(this).dialog("close"); }
}
]
});我的包含文件如下：
<link rel="stylesheet" href="${resource(dir:'css',file:'960.css')}" />
<link rel="stylesheet" href="${resource(dir:'css',file:'jquery-ui.css')}" />
<g:layoutHead />
<g:javascript library="jquery-1.5.1.min" />
<g:javascript library="jquery-ui-1.8.10.custom.min" />Opera可以正确呈现，但FireFox 4和Google Chrome9不能
完整的html：
<html>
<head>
<title>Index</title>
<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="/css/960.css" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">
<meta name="layout" content="main"/>
<script type="text/javascript" src="/js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.8.10.custom.min.js"></script>
<script type="text/javascript" src="/js/dialogs.js"></script>
</head>
<body>
<div id="header" class="container_24">
<div class="grid_9"><h1>Title</h1></div>
<nav class="grid_15">
<ul>
<li>My Gripes</li>
<li>Categories</li>
</ul>
<form>
<input type="search" />
<input type="submit" value="search" />
</form>
</nav>
</div>
<div id="body" class="container_24">
<div id="sidebar" class="grid_4">
<a href="#"><img src="/images/logo.png" id="gripeBunny" /></a>
<br />
<nav>
<ul>
<li><a id="openAbout" href="#">About</a></li>
<li><a id="openPrivacy" href="#">Privacy</a></li>
</ul>
</nav>
</div>
<div id="content" class="grid_20">
<h1>Hello World</h1>
</div>
</div>
<div id="aboutDialog" title="About">
About content goes here
</div>
<div id="privacyDialog" title="Privacy">
Privacy statement
</div>
</body>
这显示了对话框当前是如何在FireFox 4和Chrome9中呈现的。
下面是对话框在opera中的显示方式，以及我希望它在所有浏览器中的显示方式：
回答 2
Stack Overflow用户
回答已采纳
发布于 2011-05-10 16:23:30
我也遇到了类似的问题。我的问题是我使用的jqueryui css和js lib版本不同。看起来你也在做同样的事情。
尝试通过以下方式导入jqueryui，它应该会解决您的问题：
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/base/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>Stack Overflow用户
发布于 2011-07-22 12:55:18
我也有同样的问题。我停止使用谷歌托管jquery，并从jquery.com下载了最新版本。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5135266
复制相关文章
相似问题
腾讯云开发者
