javascript - 如何创建 jquery 模态弹出窗口？

Question

这个弹出窗口不起作用，我做错了什么？

$(document).ready(function () {    
    $('#dialog_link').click(function () {
        $('#dialog').dialog('open');
        return false;
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="dialog">testing popup</div>
<a href="#" id="dialog_link">click me</a>

Answer 1

您必须包括 jquery-ui还阅读了 doc :

html

<a href="#" id="dialog_link">click me
    <div id="dialog">testing popup</div>
</a>

jquery

$("#dialog").dialog({
    autoOpen: false,
    show: {
        effect: "show",
        duration: 1000
    },
    hide: {
        effect: "fadeOut",
        duration: 1000
    }
});

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

CSS

#dialog_link {
    display: block;
}

fiddle

这些是来自谷歌主机库的链接:

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>