javascript - YUI2 对话框没有正确隐藏对话框标记

Question

使用 YUI 的 Dialog 小部件时，它工作得很好，除了大对话框(想想很多内容)，页面中出现明显的副作用......页面末尾有很多空白和滚动条。

这是一个例子:

-> http://jsbin.com/ekaca4

我所做的只是采用 developer.yahoo.com/yui/examples/container/dialog-quickstart_clean.html 中对话框的原始示例并添加更多标记(以 Lorem Ipsum 的形式)。

如果您查看代码的设置方式，标记(在#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-hidden 添加样式，如 display:none 或 height:0;溢出:隐藏，我得到了奇怪的副作用，比如叠加层在显示时定位不正确。到目前为止，唯一有实际影响的方法是将#dialog1 放在高度为0 的包含div 中；溢出:隐藏，但这在 IE7 中不起作用(初始化后页面上仍然存在空白)。

谢谢你的帮助，我真的很感激。

Answer 1

我将我所有的对话框放在一个 div 中，并使用以下 css:

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

到目前为止工作正常，由于对话框，我不再有滚动条和垂直空间。我包括 display:none 以隐藏 html 直到对话框被渲染之后，一旦它们被渲染，我将显示更改为“ block ”。如果没有这个，预呈现的 html 会显示一两秒钟，导致页面有点闪烁。