0

我正在使用此处找到的 jQuery UI 对话框功能：

http://jqueryui.com/dialog（此处为 API）

我想以层叠的方式推出一堆这样的盒子。不幸的是，我认为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，又从头开始。

4

2 回答 2

3

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

你可以在这里看到它们。

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

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

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

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

于 2013-06-14T20:18:08.447 回答
1

你的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;

我会让你处理坐标的环绕，以及对话框是否关闭的错误检查等等。祝你好运！

于 2013-06-14T20:17:35.183 回答