打开iframe并折叠整个页面

Question

用户提交表单后，我想打开一个iframe并覆盖整个屏幕。正常的内容将崩溃，因此只能看到内容丰富的内容。这是如何完成的。简单地打开iframe会将所有内容放在它之上和之下。

<div id="iWait" style="display:none;"><center><iframe src="http://website.com" width="100%" height="100%"></iframe></center></div> 

Answer 1

请注意，在代码中定义iframe会导致它在后台加载。这可能会不必要地拖慢页面，直到稍后才需要加载页面。

开始与HTML类似这样（注意fixed定位）：

<iframe id="preventBoredom" src="http://www.domain.com/" frameborder="0" style="position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1000; display: none;"></iframe> 

然后，.show()像这样显示的：

$('#preventBoredom').show(); 

如果你只希望加载的iframe它揭示了当，将初始iframe src设置为空白HTML页面，并使用此jQuery替代：

$('#preventBoredom').src('http://www.domain.com/').show(); 

---

注意在回答@ROY_Finley和@Mort_Goldman：我无法想象一个良好的局面用这个，除非你打算在某个时候再次隐藏的iframe。例如，您可能希望在加载航空公司搜索结果集时保持用户繁忙（这些通常需要一段时间才能加载）。但是这种方法会让用户认为他们在另一个网站上 - 如果窗户突然被遮挡，他们会很生气。

如果表单处理是一个较慢的服务器任务，那么在继续处理之前，应该先让处理脚本关闭输出。这将允许服务器在后台完成其工作，而浏览器继续它的快乐方式。