1

我之前做了一些弹出窗口/对话框，现在我在 () 中有回归错误，并且想要重新编码以使用 JQuery 来处理 DIV/弹出窗口/对话框。迁移到 Jquery 将是一个优势，因为我们可以为对话框/弹出窗口启用重新定位和调整大小，如果弹出窗口只是一个将自身置于其他元素之上的 DIV，我们将无法做到这一点。

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

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

4

2 回答 2

2

我这样做的方法是创建一个.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/

于 2012-06-15T09:17:50.333 回答
1

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

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。因此，您无需选择元素并将其转换为对话框。相反，您重新创建一个。

于 2012-06-15T09:18:23.750 回答