jQuery 对话框和 960 网格系统
Posted
技术标签:
【中文标题】jQuery 对话框和 960 网格系统【英文标题】：jQuery Dialog and 960 Grid System 【发布时间】：2011-07-05 08:24:24 【问题描述】：我有以下使用 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 Chrome 9 不正确
完整的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 和 Chrome 9 中的呈现方式。
这是该对话框在 Opera 中的显示方式以及我希望它在所有浏览器中的显示方式：
【问题讨论】：
无法根据给定的信息进行复制，请参阅 jquery.ui.css 的小提琴和应用于您的对话框的默认 960.gs 网格 css：jsfiddle.net/KvkFe 感谢 fencliff 我发布了所有的 html 这是在什么浏览器中发生的？标题栏在实际对话框之外展开？如果没有指向您的页面的链接，这将很难解决。 【参考方案1】：我遇到了类似的问题。我的问题是我使用的 jqueryui css 和 js 库不是同一个版本。看起来你在做同样的事情。
尝试通过以下方式导入 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>
【讨论】：
感谢您的回答，Naveed。帮我解决了艾伦遇到的同样问题。【参考方案2】：我遇到了同样的问题。我停止使用 google 进行 jquery 托管，并从 jquery.com 下载了最新版本。
【讨论】：
以上是关于jQuery 对话框和 960 网格系统的主要内容，如果未能解决你的问题，请参考以下文章