Question

有以下简单的div：

<div id="dialogg">
    Hello, world!
</div>

一些CSS样式：

#dialogg {
    display: none;
}

和JQuery代码：

<script src="assets/js/jquery-1.9.1.min.js"></script>
<script src="assets/js/jquery-ui-1.10.2.custom.js"></script>
<script src="assets/js/jquery-ui-1.10.2.custom.min.js"></script>
<script type="text/javascript">
    $(function() {
        $('#dialogg').dialog({
            autoOpen: false;
            width: 400;
        });
        $('#dialogg').dialog('open');
    });
</script>

但我看不到对话！我该如何解决？怎么了？

更新：

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Исторический турнир</title>
    <link rel="stylesheet" type="text/css" href="assets/css/main-styles.css">
    <link rel="stylesheet" type="text/css" href="assets/css/departments-page-styles.css">
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
    <script src="assets/js/jquery-1.9.1.min.js"></script>
    <script src="assets/js/jquery-ui-1.10.2.custom.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#dialogg').show();
            $('#dialogg').dialog({
                autoOpen: false;
                width: 400;
            });
            $('#dialogg').dialog('open');
        });
    </script>
</head>

但是这段代码仍然无效。

Answer 1

请试试这个：

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

然后尝试： $("#dialogg").dialog();

<script>
 $(function() {
   $( "#dialogg").dialog();
 });
</script>

请参阅DEMO

example on jquery site

Answer 2

你不需要两个ui.js脚本删除一个..看起来你忘了加载css文件

在脚本之上添加它..

 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />

所以完整的代码应该是

 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="assets/js/jquery-1.9.1.min.js"></script>
<script src="assets/js/jquery-ui-1.10.2.custom.min.js"></script>
<script type="text/javascript">
$(function() {
    $('#dialogg').dialog({
        autoOpen: false;
        width: 400;
    });
    $('#dialogg').dialog('open');
});
</script>

Answer 3

当您选择$('#dialog')它不存在时，您不是在等待浏览器完全完全加载html文档。您可以使用html中的<script>...</script>更低版本，也可以在$('document').ready(function(){..});

中添加该功能

Answer 4

这也是错误的：

$('#dialogg').dialog({
  autoOpen: false;
  width: 400;
});

它应该是：

$('#dialogg').dialog({
  autoOpen: false,
  width: 400
});

使用JQuery显示简单的模态对话框

4 个答案: