jQuery Dialog and 960 Grid System
I have the following page layout using the 960 grid systm
----------------
header
-----------------
|
|
side| main
|
|
-----------------
I want to use the jQuery dialog to display a popup when the user clicks a link in the side menu. However no matter what I've tried the dialog's title bar always exapnds to fill the full screen. I've tried to set the height, the maxHeight and the zIndex of the dialog but this didn't worked. All I want is to have the dialog displayed in the center of the screen and this works whenever I don't include the 960 css but then I loose my layout.
Is there something I'm missing?
The code I'm using for the dialog is:
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"); }
}
]
});
My included files are as follows:
<link rel="stylesheet" href="${resource(dir:'css',file:'960.css')}" />
<link rel="stylesheet" href="${resource(dir:'css',file:'jquery-ui.css')}" />
<g:layoutHead />
开发者_JAVA百科 <g:javascript library="jquery-1.5.1.min" />
<g:javascript library="jquery-ui-1.8.10.custom.min" />
Opera renders this correctly but FireFox 4 and Google Chrome 9 don't
full 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>
This shows how the dialog is currently being rendered in FireFox 4 and Chrome 9.
This is how the dialog is displayed in opera and how I would like it to display in all browsers:
I was having a similar issue. My problem was that the jqueryui css and js libs I used were not the same version. It looks like you are doing the same thing.
Try importing jqueryui in the following way and it should fix your problem:
<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>
I had the same exact problem. I stopped using google for jquery hosting and downloaded the latest version from jquery.com.
加载中,请稍侯......
精彩评论