jquery - 如何获取调整大小后对话框的高度和宽度?

标签 jquery jquery-ui dialog modal-dialog jquery-ui-dialog

我成功创建了一个启用调整大小的对话框,但对于我的项目,我需要用户调整大小后打开的对话框的高度和宽度。

我创建了一个 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/

相关文章:

javascript - 使用指令将 jQueryUI 主题应用到带有 Angularjs 的按钮时出现 TypeError

css - 带触发按钮和 100% 宽度的日期选择器

android - 如何在用户按下按钮时显示 "are u sure YES OR NOT"对话框?

javascript - Owl Carousel 需要导航悬停时的滚动效果

javascript - 在没有服务器的情况下通过电子邮件发送表单输入

javascript - 绘制元素边框(动画)

javascript - 如何在 Jquery UI 对话框中验证表单?

java - 打印数组和 toString 时的输出问题

android - 进度对话框不会在 AsyncTask onProgressUpdate 上更新

javascript - 如何使用 CSS 或 jQuery 旋转元素并正确定位它