帮助 jQuery UI 对话框答案

【问题标题】：Help with jQuery UI dialog帮助 jQuery UI 对话框
【发布时间】：2009-03-26 12:31:36
【问题描述】：

我正在使用 jQuery UI.Dialog。我有一个小问题，当我单击链接以显示对话框时，#Test 中的文本消失了，并且显示了模态叠加层，但没有显示实际的模态框。

使用 FireBug 创建对话框，但有 Display:None 所以不显示。另外，如果我在 firebug 中将其更改为 Display:Block，则会显示对话框，但它位于我页面的左侧...有什么建议吗？

我的代码很简单：

<head>
<link href="Vader/jquery-ui-1.7.1.custom.css" rel="stylesheet" type="text/css">
<script src="javascripts/jquery.js" type="text/javascript"></script>
<script src="javascripts/ui.core.js" type="text/javascript"></script>
<script src="javascripts/ui.draggable.js" type="text/javascript"></script>
<script src="javascripts/ui.resizable.js" type="text/javascript"></script>              
<script src="javascripts/ui.dialog.js" type="text/javascript"></script>     
    <script type='text/javascript'>
    $(function() {
        $("a").click(function(){
            $('#Test').css('display','inline');
            $("#Test").dialog({modal: true});
        });
    });
</script>
</head>
<body>
    <a href="#">Test</a>
    <div id="Test" title="Test Title">Bla bla bla</div>
</body>

【问题讨论】：

标签： javascript jquery jquery-ui jquery-ui-dialog

【解决方案1】：

您可能要添加点击是 e.preventDefault();所以它不会尝试加载可能刷新页面的#。

    $("a").click(function(e){
        e.preventDefault();
        $('#Test').css('display','inline');
        $("#Test").dialog({modal: true});
    });

【讨论】：

【解决方案2】：

我的猜测是它没有拾取你的 css 文件，你确认它确实是吗？

据我所知，您的代码没有问题，以下测试在我的沙盒文件中有效

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!-- Above Doctype should provide S mode in Moz, Safari, Opera, IE8 and A (almost standards) in IE6/7 -->
<head>
  <meta http-equiv="Content-Type" content="application/text+html;utf-8"/>

  <title>Sandbox</title>
  <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("jquery", "1.3.2");
    google.load("jqueryui", "1.7.0");
</script>
<script type="text/javascript">

      $(document).ready(function() {
        $("a").click(function(){
            $('#Test').css('display','inline');
            $("#Test").dialog({modal: true});
        });


    });
</script>
</head>
<body>
    <div id="container">
        <a href="#">Test</a>
        <div id="Test" title="Test Title">Bla bla bla</div>
    </div>
</body>

</html>

【讨论】：

认为我找到了问题...我正在使用 Aptana V1.2.1 附带的 JQuery。小学生错误。我在这上面呆了两天。谢谢大佬。
嘿，这就是为什么我在测试时总是从外部服务器提供 jquery 和 css/ui :)

【解决方案3】：

不是块级结构，可能会造成一些麻烦。

尝试将其包装在一个 DIV 中，然后在对话框中创建该 div。

【讨论】：

【解决方案4】：

我遇到了同样的问题，结果发现没有找到 CSS 文件。使用 firebug 加载 css 文件。您可能会发现 Firebug 中显示的是“404 Not found”。

【讨论】：