如何使用 PopUp 插件 [英] How to use Plugins for PopUp
问题描述
我尝试搜索插件 jquery 以创建评论弹出窗口.但我不知道如何使用它以及支持 Popup 的插件是什么.任何人都可以帮我展示简单的代码并解释一下
试试这个:
需要了解的重要事项是:
一:您需要 中对这三个的引用:(1) jQuery 库,(2) jQueryUI 库,以及 (3) jQueryUI css>
二:任何div都可以做成对话框.div 可以有任何 HTML 格式和元素,包括按钮、图像、输入框等.div 及其所有格式化元素将在对话框中显示.
三:通常的做法是先初始化对话框,然后设置autoOpen:false,
,然后你可以用强制打开它('#divID').dialog('open')
命令.
四:单击按钮时对话框不会自动关闭.您必须使用 ('#divID').dialog( 'close' )
命令关闭它
五:初始化对话框时可以使用许多设置.其中最有用或最有趣的是:
* 自动打开:真/假,
* width: 500,//注意:没有'px'
* 位置: '顶部',
* 可拖动:假,
* closeOnEscape: 假
六:重用对话框——即替换其内容并重新打开:
$('#dlgDiv').html('<div>这里有新的东西</div>');$('#dlgDiv').dialog('open');
七:彻底销毁对话框(允许您使用.dialog()
重新创建另一个dlg:
$('#dlgDiv').dialog('destroy');
<小时>
完全工作的、独立的、可剪切/粘贴的示例:
<头><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({自动打开:假,模态:真,title: '你可以在这里输入任何标题:',width: 800,//默认宽度为300px,默认高度为auto纽扣: {长颈鹿:函数(){alert('你点击了提交');$('#thePopup').html('');//空dlg - 总是一个好主意$(this).dialog('close');}}});//结束对话框初始化$('#mybutt').click(function() {$('#thePopup').html('<img src="http://placekittens.com/150/150">');$('#thePopup').dialog('open');});});//END $(document).ready()头部><身体><div id="thePopup"></div><input type="button" id="mybutt" value="显示弹出窗口"/>
补充阅读:
http://salman-w.blogspot.ca/2013/05/jquery-ui-dialog-examples.html
https://www.udemy.com/blog/jquery-popup-窗口/
http://api.jqueryui.com/dialog/
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:
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)
这篇关于如何使用 PopUp 插件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!