I have the following page layout using the 960 grid series
---------------- 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 tried, the dialog title bar always fills the entire screen. I tried setting the height, maxHeight and zIndex of the dialog box, but this did not work. All I want to do is display a dialog box in the center of the screen, and this works when I don't turn on 960 css but then lose my layout.
Is there something I am missing?
The code I use for dialogue 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 /> <g:javascript library="jquery-1.5.1.min" /> <g:javascript library="jquery-ui-1.8.10.custom.min" />
Opera does it right, but FireFox 4 and Google Chrome 9 do not
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 displayed in FireFox 4 and Chrome 9. 
This is how the dialog box appears in the operator and how I want it to be displayed in all browsers:
