我尝试搜索插件 jquery 以创建评论弹出窗口。但我不知道如何使用它以及支持 Popup 的插件是什么。任何人都可以帮我展示简单的代码并解释
问问题
1365 次
1 回答
2
尝试这个：
需要了解的重要事项是：
一：你需要<head>这三个的引用：（1）jQuery库，（2）jQueryUI库，（3）jQueryUI css
二：任何div都可以做成对话框。div 可以具有任何 HTML 格式和元素，包括按钮、图像、输入框等。 div 及其所有格式化元素将在对话框中显示。
三：通常的做法是先初始化对话框，但设置autoOpen: false,，然后你可以用('#divID').dialog( 'open' )命令强制它打开。
四：单击按钮时对话框不会自动关闭。您必须使用('#divID').dialog( 'close' )命令关闭它
五：初始化对话框时可以使用很多设置。其中最有用或最有趣的是：
* autoOpen: true/false,
* width: 500, //注意：没有 'px'
* position: 'top',
* draggable: false,
* closeOnEscape: false
六：重用对话框——即替换其内容并重新打开：
$('#dlgDiv').html('<div>New stuff goes here</div>');
$('#dlgDiv').dialog('open');
七：彻底销毁对话框（允许您使用以下命令重新创建另一个 dlg .dialog()：
$('#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
https://www.udemy.com/blog/jquery-popup-window/
于 2013-09-14T03:31:57.723 回答