jquery 对话框高度和宽度问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10384712/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery dialog height & width issue
提问by Thomas
initially i am showing jquery dialog with fixed height and width at center of page. now i want to put a div with lots of html content inside the dialog. now i want to dynamically increase dialog height & width according to the div height & width with animate function but i want that dialog should stick at the center of page.
最初我在页面中心显示具有固定高度和宽度的 jquery 对话框。现在我想在对话框中放置一个包含大量 html 内容的 div。现在我想根据带有动画功能的 div 高度和宽度动态增加对话框的高度和宽度，但我希望该对话框应该位于页面的中心。
when dialog open first time at center of page and later if i change the height & width then dialog is not position at the center of page. so help me with concept that how to force dialog stick at center of page when height & width will be increasing with animate function.
当对话框第一次在页面中心打开时，如果我更改了高度和宽度，则对话框不在页面中心。因此，请帮助我了解如何在高度和宽度随动画功能增加时强制对话框停留在页面中心的概念。
this way i am working with dialog....here is my small code
这样我正在使用对话框......这是我的小代码
$(document).ready(function () {
$("#dialog").dialog({
autoOpen: false,
bgiframe: true,
height: 85,
width: 330,
modal: false,
draggable: true,
resizable: false,
position: 'center',
show: {
effect: "fade",
duration: 1000
},
hide: {
effect: "fade",
duration: 500
},
open: function (type, data) {
$(this).parent().appendTo("form");
}
});
});
if possible then please show me the trick with sample code. thanks
如果可能的话，请用示例代码告诉我这个技巧。谢谢
采纳答案by Mel Padden
OK, would this work, assuming nothing about how the element is resized?
好的，如果不假设元素是如何调整大小的，这行得通吗？
$(#dialog).resize(function(){
var $host = $("#idOfParent");
var hostHeight = $host.Height();
var hostWidth = $host.Width();
// center dialog on screen
this.left = (hostWidth - this.width) / 2
this.top= (hostHeight - this.height) / 2
});
回答by coder
You can try with this: DEMO
你可以试试这个：DEMO
This automatically increases the height of the dialog dynamically
这会自动动态增加对话框的高度
HTML:
HTML：
<div id="dialog">
<div id="body">I'm a dialog</div>
</div>
Script:
脚本：
<script>
$('#dialog').dialog(
"resize", "auto"
);
$('#dialog').dialog();
setTimeout(function() {
$('#body').append("Hello!<br>");
setTimeout(arguments.callee, 1000);
}, 1000);
</script>
回答by MaddHacker
Rather than put javascript watchers on the div, you can simply use the 'minHeight' option for the dialog.
您可以简单地为对话框使用 'minHeight' 选项，而不是将 javascript watchers 放在 div 上。
http://jqueryui.com/demos/dialog/-> Options
http://jqueryui.com/demos/dialog/-> 选项
That makes your code look something like this:
这使您的代码看起来像这样：
$("#dialog").dialog({
autoOpen: false,
bgiframe: true,
minHeight: 85,
width: 330,
modal: false,
draggable: true,
resizable: false,
position: 'center',
show: {
effect: "fade",
duration: 1000
},
hide: {
effect: "fade",
duration: 500
},
open: function (type, data) {
$(this).parent().appendTo("form");
}
});
