Question

试着学习Jquery，我正处于放弃的边缘！花了2天试图让对话框显示出来！

任何人都可以帮忙解释为什么这段代码不起作用？我只是在页面顶部打招呼！

jQuery的：

<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/jquery.ui.core.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    var $dialog = $('#dialog')
    //.html('This dialog will show every time!')
    .dialog({
        autoOpen: false,
        title: 'Basic Dialog'
    });
    $('#opener').click(function() {
        $dialog.dialog('open');
        // prevent the default action, e.g., following a link
        return false;
    });
});
</script>

HTML

<div id="dialog">hello</div>
<button id="opener" style="margin-left:66px;margin-top:3px;font-size:11px;width:60px">Click</button>

Answer 1

确保您的jQuery UI Core文件包含Widget工厂。看看：

的 http://jqueryui.com/download 的

即使您没有包含jQuery UI CSS文件，它仍然可以工作：

的 See jsFiddle demo 的

的 Try this exact code that I have out at jsBin: 的

<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>jQuery Dialog Demo</title> <link rel="stylesheet" type="text/css" href="//ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/cupertino/jquery-ui.css" /> </head> <body> <div id="dialog" style="display: none;">hello</div> <button id="opener">Open Dialog</button> <script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.2.min.js"></script> <script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.min.js"></script> <script type="text/javascript"> var $dialog = $("#dialog").dialog({ autoOpen: false, title: "Basic Dialog" }); $("#opener").click(function() { $dialog.dialog("open"); }); </script> </body> </html>

Answer 2

听起来你没有加载你的CSS样式表。

Jquery对话框窗口示例不起作用

2 个答案: