Question

我正在使用jQuery UI的对话框功能：

http://jqueryui.com/dialog （API Here）

我想以层叠的方式推出一堆这样的盒子。不幸的是，我不认为Position选项会对我这样做，因为它似乎非常局限于屏幕的非常特定的区域（我可能错了）。

请查看此小提琴，了解我目前的代码： http://jsfiddle.net/bUFnE/1/

这是我的JS：

//Code used to launch little score cards of the the leads
var boxID = 0;
$('a.manageLead').click(function() {
    boxID = boxID + 1;

    var url = this.href;

    // show a spinner or something via css
    var dialog = $('<div style="display:none" class="loading"></div>').appendTo('body');

    // open the dialog
    dialog.dialog({
        // add a close listener to prevent adding multiple divs to the document
        close: function(event, ui) {
            // remove div with all data and events
            dialog.remove();
        },
        modal: false,
        resizable: false,
        dialogClass: "dialog-box-"+boxID,
        position: { my: "center top", at: "center top" },
        title: "Lead Details"
    });

    // load remote content
    dialog.load(
        url, 
        {}, 
        function (responseText, textStatus, XMLHttpRequest) {
            // remove the loading class
            dialog.removeClass('loading');
        }
    );

    //////////////////////////////////////////////////////////////////////////////////////////////
    //////////////////////////////////////////////////////////////////////////////////////////////
    //////////////////////////////////////////////////////////////////////////////////////////////

      ////// THIS IS WHERE I'M TRYING TO MAKE THE MAGIC HAPPEN ///////

    var modalTop    = Number($('.dialog-box-'+boxID).css("top").replace("px", "")) + 20;
    var modalLeft   = Number($('.dialog-box-'+boxID).css("left").replace("px", "")) + 20;
    $('.dialog-box-'+boxID).css("top", modalTop+"px !important");
    $('.dialog-box-'+boxID).css("left", modalLeft+"px !important");

    //////////////////////////////////////////////////////////////////////////////////////////////
    //////////////////////////////////////////////////////////////////////////////////////////////
    //////////////////////////////////////////////////////////////////////////////////////////////              


    //prevent the browser to follow the link
    return false;               

});

如果多次单击该链接并移动新打开的对话框，您将看到它们只是堆叠在一起。我希望他们慢慢爬下页面+ 20px顶部，+ 20px左侧，然后一旦它达到200px再次开始回来。

Answer 1

关键是在.position函数的参数上添加偏移量。

您可以看到here。

这是一个更新的小提琴，它的工作原理。 http://jsfiddle.net/xGsCC/

position: { my: ("center+"+ center + " top+" + top), at: "center top" }

根据口味，只需将添加到中心和顶部的10更改为您需要的任何内容。

注意：它们在“close：”函数中被减去，以防止它们最终溢出。

Answer 2

你的position参数是：

{ my: "center top", at: "center top" }

将每个新对话框放在其父对象的中心顶部。你永远不会改变这个论点，所以当然每次对话都会出现在同一个地方。

根据jQueryUI位置文档，您可以在位置字符串中指定偏移量。所以在你的click函数中尝试这样的事情：

var posArgs = { my: "center top", at: "center top" };

if (parent) {
    posArgs = { my: "left top", at: "left+20 top+20", of: parent };
}

然后在调用dialog时使用新的位置参数，然后记住将新对话框存储为下一个对话框的父对象：

dialog.dialog({
// add a close listener to prevent adding multiple divs to the document
    close: function(event, ui) {
        // remove div with all data and events
        dialog.remove();
    },
    modal: false,
    resizable: false,
    dialogClass: "dialog-box-"+boxID,
    position: posArgs,
    title: "Lead Details"
});
parent = dialog;

我会让你处理坐标的缠绕，以及错误检查，如果对话框已关闭和填充。祝你好运！

如何使用jQuery UI创建级联对话框？

2 个答案: