Question

我正在尝试在单击按钮时出现一个jquery对话框（来自一些示例代码），但它不会出于某种原因。希望你能帮忙：

<html>      
<head>
    <script type="text/javascript" src="jquery.js"/>
    <script type="text/javascript">
        $(document).ready(function() {
            var $dialog = $('<div></div>')
                .html('This dialog will show every time!')
                .dialog({
                    autoOpen: true,
                    title: 'Pick A Time Period:'
                });

            $('#reports').click(function() {
                $dialog.dialog('open');
                // prevent the default action, e.g., following a link
                return false;
            });
        })
    </script>
</head>
<body>
    <button id="reports">Hi</button>
</body>
</html>

编辑：对不起，伙计们，没有意识到JQueryUI是一个单独的文件。今天才学习JQuery，所以对我来说都是新手

我现在已经为JQueryUI文件添加了正确的脚本行，但由于某些原因它仍然无效：

<html>      
<head>
    <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="Stylesheet" />   
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var $dialog = $('<div></div>')
                .html('This dialog will show every time!')
                .dialog({
                    autoOpen: true,
                    title: 'Pick A Time Period:'
                });

            $('#reports').click(function() {
                $dialog.dialog('open');
                // prevent the default action, e.g., following a link
                return false;
            });
        })
    </script>
</head>

<body>
    <button id="reports">Hi</button>
</body>
</html>

Answer 1

应该是：

<script type="text/javascript" src="jquery.js"></script>

Answer 2

在jquery对话框脚本之前的head标记之间包含这一行，看看你得到了什么！

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>

对话框没有显示

2 个答案: