Question

我使用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中呈现对话框。 illustration of how the dialog is currently rendered

这是对话框在Opera中的显示方式以及我希望它在所有浏览器中显示的方式：

correct dialog rendering in opera

Answer 1

我遇到了类似的问题。我的问题是我使用的jqueryui css和js libs版本不一样。看起来你在做同样的事情。

尝试按以下方式导入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>

Answer 2

我遇到了同样的问题。我停止使用谷歌进行jquery托管，并从jquery.com下载了最新版本。

jQuery Dialog和960网格系统

2 个答案: