8

インターフェイス（モーダル）をブロックするがオーバーレイがない「ajaxローダーダイアログ」を表示しようとしています。

これは、ダイアログを初期化する方法です。

  $("<div></div>").dialog({
         modal: true,
         dialogClass: "noOverlayDialog",
         autoOpen: false, //opened later
         ...
  });

オーバーレイを非表示にするために、次の CSS を追加しました。

.ui-dialog.noOverlayDialog + .ui-widget-overlay { opacity: 0 !important; }

ただし、オーバーレイを呼び出すとdialog("open")、Javascript を使用して非表示にしたかのように、オーバーレイのフラッシュが消えます。display:none;またはを使用しても同じ効果がありvisibility:hiddenます。

オーバーレイを削除するのが css であることを確認するために、css の行を削除したところ、オーバーレイが常に表示されるようになりました。

なぜこうなった？私は、静的 CSS にこの種の動作をさせるべきではなく、オーバーレイをフラッシュなしですぐに非表示にする必要があると考えました。

直感的な解決策が見つからない場合は、代わりにモーダル オプションを false に設定してオーバーレイをすべて防止し、コードを記述してモーダル動作を取得することもできます。いずれにせよ、実用的なソリューションが必要です。

4

5 に答える 5

6

jsFiddleで動作するようになりました。 このリンクを試してください

<div id="dialog">
    <h3>Here is the dialog content</h3>
    <p id="dialogContent"></p>
</div>
<button onclick="$('#dialog').dialog('open');">open</button>

<script>
    $(document).ready(function(){
        $('#dialog').dialog({
            title: 'My dialog',
            dialogClass: "noOverlayDialog",
            autoOpen:false,
            modal: true,
            open: function(event,ui){
                $('.noOverlayDialog').next('div').css( {'opacity':0.0} );
            }
        });
    });
</script>
于 2013-01-29T15:18:14.990 に答える
4

jQuery で使用されるオーバーレイには class がありui-widget-overlayます。したがって、css に以下の css ルールを含めます。

.ui-widget-overlay {
    opacity: 0;
    filter: alpha(opacity=0);  /* IE8 and lower */
}

デモ: http://jsfiddle.net/Lhwsq/

ノート：

  1. このルールが jQuery css またはその他のプラグイン css の後に含まれていることを確認してください。
  2. このスタイルは、同じページ内のすべてのダイアログに適用されます。

特定のダイアログで機能させるには、https://stackoverflow.com/a/14586175/297641を参照してください。

于 2013-01-29T16:33:40.757 に答える
3

1 つのオプションは、追加のクラスを作成し、ダイアログが開いoverlay-hiddenたときにオーバーレイに追加し、閉じたときに再度削除することです。これにより、ページ内の他のダイアログ (目に見えるオーバーレイが必要になる場合があります) が適切に機能し続けることが保証されます。

open: function(event,ui){
    $('.ui-widget-overlay').addClass('overlay-hidden');
},
beforeClose: function(event,ui){
    $('.ui-widget-overlay').removeClass('overlay-hidden');
}

@Vegaで提案されているように、クラスはtooverlay-hiddenをオーバーライドします。opacity0

.overlay-hidden {
    opacity: 0.0;
    filter: alpha(opacity=0);  /* IE8 and lower */
}

jsFiddle での作業例(@ShadeTreeDeveloper の回答から適応)。

于 2013-02-01T23:18:56.563 に答える
1

以下の答えはどれも私にはうまくいきませんでしたが、私は最終的に解決策を見つけました。

.ui-effects-wrapperダイアログは、ダイアログではなくコンテナに続くオーバーレイで呼び出されるコンテナ内に最初にレンダリングされることがわかります。

<div class="ui-effects-wrapper" ... >
     <div class="ui-dialog" .... >
     </div>
</div>
<div class="ui-widget-overlay" ...> </div>

したがって、私のセレクター.ui-dialog.noOverlayDialog + .ui-widget-overlayは、エフェクトコンテナーが削除された後にのみ有効になります。この問題を解決するには、両方のセレクターをターゲットにする必要がありました。

.ui-dialog.noOverlayDialog + .ui-widget-overlay, 
.ui-effects-wrapper + .ui-widget-overlay {
      background: none !important;
      opacity: 0 !important;
}

2番目のセレクターはグローバルであることに注意してください。

于 2013-02-12T01:48:54.220 に答える
1

あなたが見ているのは、透明効果 (ちなみに、すべてのブラウザーでサポートされているわけではありません) が有効になる前に、オーバーレイの背景画像が短時間レンダリングされているように感じます.

.ui-widget-overlay { background: none !important; }

上記は機能するはずです。ただし、上記のコメントが既に述べているように、サーバーに例を投稿するか、JSFiddle を使用すると、より具体的な診断が可能になります。

于 2013-01-29T14:52:53.917 に答える