Question

我发现this jsFiddle有一个弹出框，我试图在我的网站上实现。

HTML：

<div id="dialog">
    <p>Tell me a story</p>
    <textarea id="name"></textarea>
</div>
<input type="button" id="open" value="Open Dialog" />

使用Javascript：

$("#dialog").dialog({
    autoOpen: false,
    buttons: { 
        Ok: function() {
            $(this).dialog("close");
       },
        Cancel: function () {
            $(this).dialog("close");
        }
    }
});

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

虽然它适用于jsfiddle，但在我的网站上，div显示在页面内部而不是弹出窗口（就像我不会有Jquery-UI一样）。

我的网站有Jquery-2.0.2和jQuery-ui-1.0.3，根据jsfiddle它应该可以工作。

我可能遗失的任何提示？

Answer 1

小提琴配置为将代码包装在onload事件中。因此，如果您在站点上运行此操作，则需要手动添加DOM ready包装器（或将代码放在</body>之前）。如果没有这个，你的代码会在呈现元素之前运行，然后对话框不会被jQuery转换为对话框。

$(function(){
    $("#dialog").dialog({
        autoOpen: false,
        buttons: { 
            Ok: function() {
                $(this).dialog("close");
           },
            Cancel: function () {
                $(this).dialog("close");
            }
        }
    });

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

Answer 2

尝试在头标记中添加此脚本和css

<script type='text/javascript' src='//code.jquery.com/jquery-2.0.2.js'></script>                       
<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">

它将链接jQuery js文件，jQuery UI API js文件和jQuery UI CSS文件。

您可以参考演示here和文档here

jquery弹出窗口工作在jsFiddle但不在我的网站上

2 个答案: