2011-01-20 36 views
2

YUIのダイアログウィジェットでは、大きなダイアログ(たくさんのコンテンツを考える)以外では、ページに目立った副作用があります。スクロールバー。ダイアログのマークアップが正しく表示されないダイアログYUI2ダイアログボックスが正しく表示されない

ここでは例です:

- >http://jsbin.com/ekaca4

私がしたすべてはdeveloper.yahoo.com/yui/examples/container/dialog-quickstart_clean.htmlでダイアログの元の例を取ると、追加しましたより多くのマークアップ(Lorem Ipsumの形で)。

あなたはコードが設定されている方法を見てみると、(#1 Dialog1の中)マークアップは Yahoo.util.Event.onDomReady火災までページで完全に表示され、ダイアログが

でインスタンス化されます
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;">

このコンテンツはまだ私のレイアウトの大部分であり、スクロールバーと垂直スペースが存在することを除いて、これは問題ありません。 yui-overlayにスタイルを追加しようとすると、display:noneやheight:0のように非表示になります。オーバーフロー:隠されている、私はオーバーレイが表示されたときに間違って配置されているような奇妙な副作用を取得します。これまでのところ本当の影響があった唯一の方法は#dialog1を高さが0のdivを含む場所に置くことでした。オーバーフロー:非表示ですが、IE7では動作しません(空白はinitの後もページに表示されます)。

ご協力いただきありがとうございます。本当にありがとうございます。

答えて

0

は、私は次のCSSでdivの中に私のダイアログのすべてを置く:

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

すると罰金がこれまでのところ、私はもはやによるダイアログにスクロールバーと垂直方向のスペースを持っていない作品。ダイアログがレンダリングされるまでhtmlを非表示にするには、display:noneを含めます。レンダリングされると、表示が「ブロック」に変更されます。これがなければ、プレレンダリングされたhtmlは1〜2秒間表示され、ページがちょっとちらつくようになります。

関連する問題