自定义对话框到特定位置

Question

正如你可以看到3个图片Screenshot1.png，Screenshot2.png，Screenshot3.png。在屏幕截图1中，当您单击“创建迭代”时，会创建一个对话框，但其位置不在右侧位置，即screenshot2.png。我想在Screenshot3.png中看到它自定义它的位置。由于我试图通过给予位置[200,380]来确定其位置并且其工作正常，但对于像笔记本电脑这样的小屏幕，其位置受到干扰。因此可以自定义它的位置和位置，这样当我创建一个对话框时，就会在screenshot3.png 1

中看到它。

我希望在创建对话框时，它应始终在“ITERATION PAGE”中打开。其中Iteration 1是我的对话框。 基本上，如果你看到我的代码，那么你可以猜到我想要的东西。

此处代码[jsfiddle.net/coolanuj/7683X/46 /]

Answer 1

您需要做的是根据您要将其放置在页面中的元素的offset()动态创建位置数组的数组。

以下是一些基于以下简单html创建动态定位对话框的演示代码：

HTML

<div class="col"><button>Open Dialog</button></div>
<div class="col"><button>Open Dialog</button></div>
<div class="col"><button>Open Dialog</button></div>

JS：

/* how much to offset from the main element*/
var dialogOffset = {
        top: 50,
       left: 10
}

$('button').click(function() {
    var $parent = $(this).closest('div.col');
    var parentPos = $parent.offset()
/* create position array for new dialog*/
    var dialogPosition = [parentPos.left + dialogOffset.left, parentPos.top + dialogOffset.top];

    var parentIndex = $('.col').index($parent)

    $('<div>').dialog({      
         position:  dialogPosition,
        width: 150,

        title: 'Column '+(parentIndex+1) ,
        close: function() {
            $(this).remove()
        }
    })
})

DEMO：

整页：http://jsfiddle.net/CPtp4/show/

代码视图：http://jsfiddle.net/CPtp4/

由于使用对话框有不同的设置，因此在设置位置时，将取决于您的应用程序。每次以这种方式打开对话框时都可以设置位置：

/* iniitalize dialog on page load*/
$('#dialog').dialog({
    autoOpen:false

});

$('#myButton').click(function(){
     var pos=$('#myDiv').offset();
     var dialogPos=[pos.left, pos.top];
     $('#dialog').dialog('option','position',dialogPos).dialog('open')

})