3

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

2 に答える 2

2

jQuery UI Core ファイルに Widget ファクトリが含まれていることを確認してください。見てみましょう：

http://jqueryui.com/download

jQuery UI CSS ファイルが含まれていなくても、動作するはずです。

jsFiddle のデモを見る

私が 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>
于 2012-04-16T16:05:12.867 に答える
0

CSS スタイルシートが読み込まれていないようです。

于 2012-04-16T16:03:48.610 に答える