Question

以下HTML显示了一个按钮，并在单击时调用jQuery对话框。

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>
    <div id="dialog">
    </div>
    <button>
        Open</button>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#dialog').dialog({
                autoOpen: false,
                modal: true
            });

            $('button').click(function () {
                $('#dialog').dialog('open');
            });
        });

    </script>
</body>
</html>

在对话框显示的Chrome中，滚动条显示超出窗口边界。此外，当您移动滚动条时，它们会被锁定。在IE9中，浏览器崩溃。这段代码看起来很简单。

我还创建了一个jsFiddle示例... http://jsfiddle.net/jeljeljel/RcR8e/

有人可以说出它有什么问题吗？

Answer 1

您缺少jquery ui css文件。

更新了小提琴：http://jsfiddle.net/jensbits/RcR8e/7/

jquery ui site under themes有几种可供选择。小提琴使用http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/start/jquery-ui.css

简单的jQuery对话框锁定Chrome，IE

1 个答案: