如何使用PopUp插件[关闭]答案

【问题标题】：How to use Plugins for PopUp [closed]如何使用PopUp插件[关闭]
【发布时间】：2013-09-18 19:44:28
【问题描述】：

我尝试搜索插件 jquery 以创建评论弹出窗口。但我不知道如何使用它以及支持 Popup 的插件是什么。任何人都可以帮我展示简单的代码并解释一下

【问题讨论】：

标签： jquery jquery-ui jquery-plugins

【解决方案1】：

试试这个：

Working jsFiddle Demo

需要了解的重要事项是：

一：您需要<head> 中对这三个的引用：(1) jQuery 库，(2) jQueryUI 库，以及 (3) jQueryUI css

二：任何 div 都可以做成对话框。 div 可以具有任何 HTML 格式和元素，包括按钮、图像、输入框等。div 及其所有格式化元素将在对话框中显示。

三：通常的做法是先初始化对话框，但设置autoOpen: false,，然后你可以用('#divID').dialog( 'open' )命令强制打开它。

四：单击按钮时对话框不会自动关闭。您必须使用('#divID').dialog( 'close' ) 命令关闭它

五：初始化对话框时可以使用很多设置。其中最有用或最有趣的是：
* 自动打开：真/假，
* width: 500, //注意：没有'px'
* 位置： 'top',
* 可拖动： false,
* closeOnEscape: 错误

六：重用对话框——即替换其内容并重新打开：

$('#dlgDiv').html('<div>New stuff goes here</div>');
$('#dlgDiv').dialog('open');

七：彻底销毁对话框（允许您使用.dialog()重新创建另一个dlg：

$('#dlgDiv').dialog('destroy');

完全工作、独立、可剪切/可粘贴的示例：

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />

        <script type="text/javascript">
            $(document).ready(function() {

                $('#thePopup').dialog({
                    autoOpen: false,
                    modal:true,
                    title: 'You can put any title here:',
                    width: 800, //default width is 300px, default height is auto
                    buttons: {
                        Giraffe: function() {
                            alert('You hit subMIT');
                            $('#thePopup').html(''); //empty dlg - always a good idea
                            $(this).dialog('close');
                        }
                    }
                }); //END dialog init

                $('#mybutt').click(function() {
                    $('#thePopup').html('<img src="http://placekittens.com/150/150">');
                    $('#thePopup').dialog('open');
                });

            }); //END $(document).ready()

        </script>
    </head>
<body>

<div id="thePopup"></div>
<input type="button" id="mybutt" value="Show the Popup" />

</body>
</html>

补充阅读：

http://salman-w.blogspot.ca/2013/05/jquery-ui-dialog-examples.html

How to customise jquery ui dialog box title color and font size?

https://www.udemy.com/blog/jquery-popup-window/

How do I pass a an element position to jquery UI dialog

http://api.jqueryui.com/dialog/

jQuery UI dialog button text as a variable

extend jquery ui dialog (add more options)

【讨论】：