2

ボタンがクリックされたときに jQuery UI ダイアログに表示される非表示の .Net ユーザー コントロール (hidden.ascx) を含む Asp.Net Web フォーム ページがあります。これで、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>

ご覧のとおり、かなり単純なものです。ただし、この問題を回避する方法を見つけることができないようですので、助けていただければ幸いです。

4

1 に答える 1

0

問題は、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");
}
于 2012-08-20T16:56:13.770 に答える