Question

我之前做了一些弹出窗口/对话框，我现在在（）中遇到了回归错误，并希望重新编码以使用JQuery进行DIV /弹出窗口/对话框。移动到Jquery将是一个优势，因为我们可以启用对话框/弹出窗口的重新定位和调整大小，如果弹出窗口只是一个将自己放在其他元素上的DIV，我们就不能。

现在我想知道弹出/对话/ DIV与JQuery一起出现的“最佳”方式是什么？我宁愿不添加插件，只包含基本的JQuery文件。你能告诉我怎么做吗？

当前页面的内容类似于弹出窗口，但不能重新定位。

Answer 1

我这样做的方法是创建一个.popup类，其中包含弹出窗口的基本布局功能。然后将此类添加到页面顶部的隐藏<div>。

然后当需要弹出窗口时，将jQuery的draggable和resizable属性附加到它。之后，使用来自专用于弹出内容的页面的.get()请求加载弹出窗口的内容，然后加载.show()。

示例

CSS

.popup { display:none; position:absolute; // some other nice styling features }

HTML

<body> <div class='popup'></div> ... page content ... </body>

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

Answer 2

这是一个基本的对话插件：

http://jsfiddle.net/pjUUQ/

(function($) {
    var dialogHTML = '<div class="dialog"></div>';

    $.openDialog = function(opts) {
        // Create the DIV for dialog without inserting into DO
        var dialog = $(dialogHTML);
        dialog.appendTo('body');

        // Give dialog some basic CSS
        dialog.css({
            position: 'absolute', // positioned
            'z-index': Math.pow(2,32) // make it sit on top
        });

        // Position the dialog on the screen
        var horizOffset = ($(window).width() - opts.width || dialog.outerWidht()) / 2;
        var vertOffset = ($(window).height() - opts.height || dialog.outerHeight()) / 2;
        dialog.css({
            left: horizOffset,
            right: horizOffset,
            top: vertOffset,
            bottom: vertOffset
        });

        // Return dialog object to make it chainable
        return dialog;            
    };        

}(jQuery));

$.openDialog({width: 200, height: 100}).append('hello world');

您当然可以添加很多内容，例如处理要在Esc上关闭的关键事件，添加带有按钮的标题栏。但是你可能已经知道如何做这些事了。

创建对话框时需要注意的事项：

设置足够高的z-index，以便对话框始终位于顶部
将对话框元素追加到BODY

根据我的经验，如果对话框HTML并不总是出现在页面上，性能会更好一些。这违背了优雅的降级，但DOM树越轻，应用程序似乎越快。因此，最好根据需要将对话框元素添加到树中。

编辑：请注意，我的对话框插件不希望您在页面上有预定义的HTML。它只是让人想起一个div。因此，您不选择元素并将转换它转换为对话框。相反，你重新创建一个。

使用JQuery进行弹出窗口/对话框的最佳方法？

2 个答案: