YUIのダイアログウィジェットでは、大きなダイアログ(たくさんのコンテンツを考える)以外では、ページに目立った副作用があります。スクロールバー。ダイアログのマークアップが正しく表示されないダイアログYUI2ダイアログボックスが正しく表示されない
ここでは例です:
私がしたすべては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の後もページに表示されます)。
ご協力いただきありがとうございます。本当にありがとうございます。