如何使用插件弹出窗口 [英] How to use Plugins for PopUp

查看：14 发布时间：2022/1/11 12:38:59 jquery jquery-ui jquery-plugins

本文介绍了如何使用插件弹出窗口的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

解决方案

试试这个:

工作 jsFiddle 演示

需要了解的重要事项是:

一:您需要在 <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>这里有新的东西</div>');$('#dlgDiv').dialog('open');

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

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

<小时>

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

<html><头><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"/><脚本类型="文本/javascript">$(文档).ready(函数() {$('#thePopup').dialog({自动打开:假，模态:真，title: '你可以在这里放任何标题:',width: 800,//默认宽度为300px，默认高度为auto纽扣: {长颈鹿:函数(){alert('你点击了提交');$('#thePopup').html('');//empty dlg - 总是一个好主意$(this).dialog('close');}}});//结束对话框初始化$('#mybutt').click(function() {$('#thePopup').html('<img src="http://placekittens.com/150/150">');$('#thePopup').dialog('open');});});//结束 $(document).ready()</脚本></头><身体><div id="thePopup"></div><input type="button" id="mybutt" value="Show the Popup"/></身体></html>

补充阅读:

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

如何自定义jquery ui对话框标题颜色和字体大小?

https://www.udemy.com/blog/jquery-popup-窗口/

我如何通过jquery UI 对话框的元素位置

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

jQuery UI 对话框按钮文本作为变量

扩展 jquery ui 对话框(添加更多选项)p>

I try to search plugin jquery for create PopUp of comment. But i don't know how use it and what is plugin that support for Popup. Any one can help me to show simple code and explain

解决方案

Try this:

Working jsFiddle Demo

The important things to know are:

One: You need the references in the <head> to these three: (1) the jQuery library, and (2) the jQueryUI library, and (3) the jQueryUI css

Two: Any div at all can be made into a dialog. The div can have any HTML formatting and elements, including buttons, images, input boxes, etc. The div, with all its formatted elements, will appear as such in the dialog.

Three: Usual practice is to first initialize the dialog, but set autoOpen: false,, and then later on you can force it to open with a ('#divID').dialog( 'open' ) command.

Four: The dialog will not auto-close when you click the button. You must close it using the ('#divID').dialog( 'close' ) command

Five: There are many settings you can use when initializing the dialog. Among the most useful or intriguing are:
* autoOpen: true/false,
* width: 500, //Note: no 'px'
* position: 'top',
* draggable: false,
* closeOnEscape: false

Six: To re-use a dialog -- that is, to replace its contents and re-open:

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

Seven: To outright destroy a dialog (allows you to re-create another dlg using .dialog():

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

Fully working, stand-alone, cut/pastable example:

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

Additional Reading:

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)

这篇关于如何使用插件弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文