Question

由于某种原因，对话框没有显示..有谁知道为什么？

我原本以为是因为链接到jquery但是它们对我来说似乎很好？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>

        <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>

        <script>
        $('#dialog').dialog({
            close: function() {
                $(this).find(':checked').each(function() {
                    var name = $(this).attr('name');
                    $('#form [name="' + name + '"]').val(true);
                });
            },
            buttons:{Close:function(){
            $(this).dialog('close');
        }
        }
        })
        </script>

    </head>

    <body>

        <form id="form">

            <div>form Box1<input type="text" name="box1"  /></div>
            <div>form Box2<input type="text" name="box2"  /></div>
            <div>form Box3<input type="text" name="box3"  /></div>

        </form>

        <div>Text fields shown for demo, use hidden in real form</div>

        <div id = "dialog">

            Box1<input type="checkbox" name="box1"  />
            Box2<input type="checkbox" name="box2"  />
            Box3<input type="checkbox" name="box3"  />

            <div>Checked boxes auto update to form on close</div>

        </div>  

    </body>
</html>

从这个似乎有用的jsfiddle中取出 - http://jsfiddle.net/pLWzs/

感谢您的帮助

Answer 1

您需要将代码放入文档就绪调用中。

$(document).ready(function() {
  // Handler for .ready() called.
});

jsFiddle会自动为您执行此操作，但您必须在自己的代码中执行此操作。

例如：

$(document).ready(function () {
    $('#dialog').dialog({
        close: function () {
            $(this).find(':checked').each(function () {
                var name = $(this).attr('name');
                $('#form [name="' + name + '"]').val(true);
            });
        },
        buttons: {
            Close: function () {
                $(this).dialog('close');
            }
        }
    })
});

否则没有它，您的代码将在元素实际存在之前执行。

JQuery UI对话框 - 框未显示

1 个答案: