2

YUI の Dialog ウィジェットを使用すると、大きなダイアログ (多くのコンテンツを考えてください) でページに顕著な副作用が現れることを除いて、うまく機能します... ページの最後に大量の空白とスクロールバーが表示されます。

次に例を示します。

-> http://jsbin.com/ekaca4

私が行ったのは、developer.yahoo.com/yui/examples/container/dialog-quickstart_clean.html にあるダイアログの元の例を取り上げ、さらにマークアップを (Lorem Ipsum の形式で) 追加することだけでした。

コードの設定方法を見ると、Yahoo.util.Event.onDomReadyが起動し、Dialog が

YAHOO.example.container.dialog1 = new YAHOO.widget.Dialog("dialog1", 
      { width : "30em",
        fixedcenter : true,
        visible : false, 
        constraintoviewport : true,
        buttons : [ { text:"Submit", handler:handleSubmit, isDefault:true },
             { text:"Cancel", handler:handleCancel } ]
      });

この時点で、<div id="dialog1">すべてのマークアップを保持しているプレーン ジェーンがコンテナによってラップされ<div class="yui-panel-container yui-dialog yui-overlay-hidden shadow" id="dialog1_c" style="visibility: hidden; z-index: 2; left: 307px; top: 10px;">ます。

これは問題ありませんが、このコンテンツがまだ私のレイアウトの大部分を占めており、スクロールバーと垂直方向のスペースが存在します。display:none や height:0; のように yui-overlay-hidden にスタイルを追加しようとすると、overflow:hidden を表示すると、オーバーレイが正しく配置されないなどの奇妙な副作用が発生します。これまでのところ、実際に影響を与えた唯一の方法は、 #dialog1 を含む div に height:0; を配置することです。overflow:hidden ですが、これは IE7 では機能しません (初期化後もページに空白が残っています)。

助けてくれてありがとう、本当に感謝しています。

4

1 に答える 1

0

次のCSSを使用して、すべてのダイアログをdivに配置しました。

div.dialogs{display:none;position:fixed;top:0px;left:80px;

ダイアログのためにスクロールバーと垂直スペースがなくなりました。ダイアログがレンダリングされるまで html を非表示にdisplay:noneします。ダイアログがレンダリングされたら、表示を「ブロック」に変更します。これがないと、事前にレンダリングされた html が 1 ～ 2 秒間表示され、ページがちらつく原因になります。

于 2013-03-13T17:52:47.473 に答える