IE7 和 IE8 的 jQuery UI 对话框问题

Question

我有一个 Asp.Net Web 表单页面，其中包含一个隐藏的 .Net 用户控件 (hidden.ascx)，单击按钮时该控件会显示在 jQuery UI 对话框中。现在，这在 IE9 和 Chrome 中运行良好。

但是，在 IE8 中，对话框被推到页面底部而不是居中。

在 IE7 中，对话框居中但只读(因为对话框中的所有控件都是只读的...我也无法通过单击右上角的“x”来关闭对话框 - 基本上是整个对话框页面无法使用，直到我刷新页面)。

我正在使用 jQuery 1.5.1 和 jQuery UI 1.8.11 并确保添加核心、对话框、位置和小部件的引用。

下面是显示隐藏用户控件的 jQuery 调用:

 $('#button').click(function(){
  showUserControl();
});

function showUserControl(){
  var d = $('#container').dialog({
    modal: true,
    position: 'center',
    autoOpen: false,
    title: 'show .net user control',
    width: 500,
    show: 'puff',    
  }).height('auto');

  d.dialog("open");
}

这里是一些hidden.ascx 控件(针对本文进行了简化):

<fieldset id="container" class="layoverForm" style="display: none">   

    <div id="status">
        <asp:ValidationSummary ID="vsErrors" ValidationGroup="audit" ShowSummary="true" DisplayMode="BulletList" runat="server" />
    </div>    
    <div class="row">
        <span class="label">Choose One:<b>*</b></span>
        <span class="control">
            <asp:DropDownList ID="cboPickList" ValidationGroup="audit" runat="server"></asp:DropDownList>
            <asp:RequiredFieldValidator ID="rfvPickList" ValidationGroup="form" ControlToValidate="cboPickList" InitialValue="" Display="None" Text="*" runat="server" ErrorMessage="Please choose one."></asp:RequiredFieldValidator>
        </span>
    </div>
    <div class="row">
      <asp:Button ID="btnSubmit" Text="Submit" runat="server" />
    </div> </fieldset>

如您所见，这确实是非常简单的事情。但是，我似乎无法找到解决此问题的方法，因此非常感谢任何帮助。

Answer 1

问题是，在 IE7 中，为了使模式正常工作，您还必须将捕获点击的 div 附加到附加对话框 div 的同一位置。将 $('.ui-widget-overlay').appendTo('form:first'); 添加到弹出窗口的 openOn 函数应该可以解决该问题。所以整个声明 block 看起来像这样:

function showUserControl(){
    var d = $('#container').dialog({
    modal: true,
    position: 'center',
    autoOpen: false,
    title: 'show .net user control',
    width: 500,
    show: 'puff',
    open: function (event, ui) {
        $(this).parent().appendTo(jQuery("form:last"));
        $('.ui-widget-overlay').appendTo('form:first');
    },
  }).height('auto');

  d.dialog("open");
}