0

在此处输入图像描述在此处输入图像描述 在此处输入图像描述 如您所见，有 3 张图片 Screenshot1.png 、 Screenshot2.png 、 Screenshot3.png 。在 screenshot1 中，当您单击“创建迭代”时，会创建一个对话框，但它的位置不在正确的位置，即 screenshot2.png 。我想自定义它的位置，就像您在 Screenshot3.png 中看到的那样。因为我试图通过给出 position[200,380] 来固定它的位置，它的工作正常，但对于像笔记本电脑这样的小屏幕，它的位置会受到干扰。那么是否可以自定义它的位置和位置，以便在我创建一个对话框时创建它，如您在 screenshot3.png 1中看到的那样

我希望在创建对话框时，它应该始终在“迭代页面”中打开。这里迭代 1 是我的对话框。基本上，如果您看到我的代码，那么您可以猜到我想要什么。

代码在这里 [jsfiddle.net/coolanuj/7683X/46/]

4

1 回答 1

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()
        }
    })
})

演示：

整页：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')

})
于 2012-11-11T11:44:02.050 回答