我成功创建了一个启用调整大小的对话框,但对于我的项目,我需要用户调整大小后打开的对话框的高度和宽度。
我创建了一个 id=opener 的按钮和一个 id=dialog 的 div。如果可能的话,有人可以帮助我吗?
Javascript:
// increase the default animation speed to exaggerate the effect
$.fx.speeds._default = 1000;
$(function()
{
$( "#dialog" ).dialog(
{
modal:true,
autoOpen: false,
show: "blind",
hide: "explode",
buttons: [
{
text: "Ok",
click: function() { $(this).dialog("close"); }
}] ,
resizable: true,
width:'auto',
height:'auto'
});
$( "#opener" ).click(function()
{
$( "#dialog" ).dialog( "open" );
return false;
});
});
HTML:
<body>
<div class="demo">
<div id="dialog" title="Basic dialog">
<p>My content here. I want to show the height and width of my dialog after it is resized by a user
</p>
</div>
<button id="opener">Open Dialog</button>
</div>
</body>
最佳答案
使用 resizeStop
事件,如下所示:
$( "#dialog" ).dialog({
modal:true,
autoOpen: false,
show: "blind",
hide: "explode",
buttons: [{
text: "Ok",
click: function() { $(this).dialog("close"); }
}] ,
resizable: true,
width:'auto',
height:'auto',
resizeStop: function(event, ui) {
alert("Width: " + $(this).outerWidth() + ", height: " + $(this).outerHeight());
}
});
调整对话框大小后,将触发 resizeStop
选项中指定的函数内容。
关于jquery - 如何获取调整大小后对话框的高度和宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9343648/