[英]How to position jQuery Dialog Box “Center and Middle” of a specific <DIV>
我想将jQuery对话框中心对齐到DIV而不是整个窗口。
这是我的代码:
HTML
<div id="Box1"><input id="openDialogButton" type="button" value="Open Dialog"></div>
<div id="Box2"></div>
<div id="Box3"></div>
<div id="dialogbox" title="Dialog Heading">
<p>Test Message</p>
</div>
CSS
div {
display:inline-block;
height:400px;
padding:10px;
border:1px solid #ff0000;
width:50%;
vertical-align:top;
}
#Box1 {
width:90px;
}
#Box2 {
width:150px;
}
jQuery的
$(document).ready(function () {
$("#openDialogButton").click(function () {
$("#dialogbox").dialog({
width: 300,
autoOpen: false,
modal: false,
position: {
my: "center",
at: "center",
of: $('#Box3')
},
buttons: {
"Submit": function () {
$(this).dialog("close");
}
}
});
});
});
这是小提琴: http : //jsfiddle.net/Hftm3/ (出于某种原因,我的对话框在此小提琴中无法正常工作。不确定为什么)
让我知道您是否需要其他信息。
请提出建议。
我认为问题是因为该元素在视口中不可见,在这种情况下,您可以scrollTo
到该元素,然后触发对话框。
码:
$(document).ready(function () {
$("#openDialogButton").click(function () {
$('html, body').animate({
scrollTop: $("#Box3").offset().top
}, 1000, function () {
$("#dialogbox").dialog({
width: 300,
modal: false,
position: {
my: "center",
at: "center",
of: $('#Box3')
},
buttons: {
"Submit": function () {
$(this).dialog("close");
}
}
});
});
});
});
演示: http : //jsfiddle.net/8cjk6/
在单击按钮事件中,您将设置对话框。 如果将autoOpen
设置为true,则单击按钮后将立即显示它。 我已经在您的jsfiddle中对其进行了测试。 您只需要调整大小:
$(document).ready(function () {
$("#openDialogButton").click(function () {
$("#dialogbox").dialog({
width: 300,
height: 200, //try this
autoOpen: true, //try this too
modal: false,
position: {
my: "center",
at: "center",
of: $('#Box3')
},
buttons: {
"Submit": function () {
$(this).dialog("close");
}
}
});
});
});
另外,更改CSS以仅匹配您需要的内容:
#box1, #box2, #box3 {
display:inline-block;
height:400px;
padding:10px;
border:1px solid #ff0000;
width:50%;
vertical-align:top;
}
仅使用div{
即可使用,这会破坏所有div(包括由jquery生成的div以显示对话框)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.