使用JQuery做弹出式窗口/对话框的最佳方式？ [英] Best way of doing popups / dialogs with JQuery?
问题描述
我之前做了一些弹出/对话框，我现在已经在（）中的回归错误，并希望重新编码使用JQuery的DIV /弹出窗口/对话框。移动到Jquery将是一个优势，因为我们可以启用重新定位和调整对话框/弹出窗口，如果弹出窗口只是一个DIV，本身放在其他元素，我们不能。
I previously did some popups / dialogs that I've now got regression error in () and want to recode to use JQuery for the DIVs / popups / dialogs. Moving to Jquery will be an advantage since we can enable repositioning and resize for dialogs / popups which we can't if the popup is just a DIV which places itself over the other elements.
现在我不知道什么是最好的使弹出/对话框/ DIV显示与JQuery？我宁愿不添加插件，只包括基本的JQuery文件。你可以告诉我怎么做吗？
Now I wonder what is the "best" way to make popups / dialogs / DIV appear with JQuery? I'd rather not add a plugin and only include the basic JQuery file. can you tell me how to do it?
当前页面是一个弹出窗口，但不能重新定位。
The current page makes something like a popup but it is not repositionable.
推荐答案
我这样做的方式是创建一个 .popup 类，包含弹出窗口的基本布局功能。然后将此类添加到页面顶部的隐藏< div> 。
The way I would do this is create a .popup class that contains the basic layout features for the popup. Then add this class to a hidden <div> at the top of the page.
需要调用jQuery的 draggable 和 resizable 属性。之后，从专门用于弹出内容的页面加载弹出框的内容 .get（），然后 .show（） it。
Then when a popup is needed, attatch the draggable and resizable attributes of jQuery to it. After that, load the popup's content with a .get() request from a page dedicated for popup content and then .show() it.
示例
CSS
.popup
{
display:none;
position:absolute;
// some other nice styling features
}
HTML
<body>
<div class='popup'></div>
...
page content
...
</body>
Javascript
Javascript
function popup(){
// for the draggable you may want to specify the drag handle like only the title of the popup
var popup = $('.popup');
popup.draggable();
popup.resizable();
$.get('/getPopup.php?action=theKindOfPopupRequested', function(data) {
popup.html(data);
popup.show('fast');
});
}
资料来源：
http://jqueryui.com/demos/resizable/
http://jqueryui.com/demos/draggable/
这篇关于使用JQuery做弹出式窗口/对话框的最佳方式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
