Question

我有一个MVC3视图调用局部视图，该视图获取包含一些设置的模型，您可以在下面找到代码。

我不明白为什么每次调整窗口大小时，我的整个对话框都会调整大小并且初始内容会消失。

我尝试了各种“居中”功能，但它们都产生相同的输出。我正在使用IE9。

<div id="dialog">  
    <p>@Model.Message</p>  
</div>  

<script language="javascript" type="text/javascript">
    $(function () {
        $('#dialog').dialog({
            autoOpen: true,
            title: "@Model.Title",
            show: "blind",
            width: "@Model.Width",
            height: "@Model.Height",
            buttons: {"Ok": function () { $(this).dialog("close"); }
            },
            close: function(event, ui) {
                @if (!string.IsNullOrEmpty(Model.ReturnUrl))
                {
                    @:location.href = "@Url.Action("" + @Model.Action + "", "" + @Model.Controller + "", new { returnUrl = "" + @Model.ReturnUrl + "" })"
                }
                else { 
                    @:close: function(event, ui) { $(this).close(); }
                }
            },
            modal: true,
            resizable: false     
        });
    });  

 jQuery.fn.center = function () {
        this.css("position","absolute");
        this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
        this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
        return this;
    }

$(window).resize(function(){
    $("#dialog").center();
 });

我做错了什么？

Answer 1

您没有意识到用作选择器的对话框元素不是对话框小部件的父元素。元素被包装，以便您的选择器元素成为内容区域。

外包装有class =“ui-dialog”。在您的插件功能目标$(this).closest('.ui-dialog')中进行正面调整。它在创建过程中已设置为position:absolute。

为什么我的jQuery对话框调整大小并且内容消失？

1 个答案: