2

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

这是一个例子：

-> http://jsbin.com/ekaca4

我所做的只是在 developer.yahoo.com/yui/examples/container/dialog-quickstart_clean.html 上获取对话框的原始示例并添加更多标记（以 Lorem Ipsum 的形式）。

如果您查看代码的设置方式，标记（在#dialog1 中）在页面上完全可见，直到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;">.

这很好，除了这个内容仍然是我布局的很大一部分，并且存在滚动条和垂直空间。如果我尝试向 yui-overlay-hidden 添加样式，例如 display:none 或 height:0; 溢出：隐藏，我得到奇怪的副作用，比如显示时叠加层的位置不正确。到目前为止，产生任何实际影响的唯一方法是将 #dialog1 放入高度为 0 的包含 div 中；溢出：隐藏，但这在 IE7 中不起作用（初始化后页面上仍然存在空格）。

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

4

1 回答 1

0

我把我所有的对话框放在一个带有以下css的div中：

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

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

于 2013-03-13T17:52:47.473 回答