Question

我有一个Asp.Net webforms页面，其中包含一个隐藏的.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函数应该可以解决问题。所以整个声明块看起来像这样：

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");
}

IE7和IE8的jQuery UI对话问题

1 个答案: