Html 在模态框中打开网页？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6537102/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Open Web page in modal box?
提问by Ann
Is this possible? not just html but also a different stylesheet etc while blacking out the rest of the screen?
这可能吗？不仅是 html，还有不同的样式表等，同时将屏幕的其余部分涂黑？
Thanks for any help.
谢谢你的帮助。
Ann
安
回答by Derek Adair
Check out Colorbox(Demo). It is a very well put together plugin for jQuery.
查看Colorbox(演示)。这是一个很好的jQuery插件。
Using iFrames you are able to load pretty much anything into this modal plugin. Here is the example code for the demo w/ the iFrame.
使用 iFrames，您可以将几乎所有内容加载到此模态插件中。这是带有 iFrame 的演示的示例代码。
markup
标记
<a class='example7' href="http://google.com">Outside Webpage (Iframe)</a>
JavaScript
JavaScript
$(".example7").colorbox({iframe:true, innerWidth:425, innerHeight:344});
So, you could just change http://google.comto ./your-iFrame.htmlor whatever and it would load and render that entire page!
因此，您可以更改http://google.com为./your-iFrame.html或其他任何内容，它会加载并呈现整个页面！
回答by phihag
You can either use window.showModalDialog(although this may be implemented as a new window) or implement a modal dialog yourself by loading the page in an <iframe>and adding a semi-transparent element whose z-indexmakes it cover the whole document.
您可以使用window.showModalDialog（尽管这可以作为一个新窗口实现）或自己实现一个模态对话框，方法是将页面加载到一个<iframe>并添加一个半透明元素z-index使其覆盖整个文档。
回答by Adam
Yes, load the data into an iframe. Most modal scripts such as simple modal have this integrated very nicely and only a few options need to be adjusted to make use of it.
是的，将数据加载到 iframe 中。大多数模态脚本（例如 simple modal）都很好地集成了这一点，只需调整几个选项即可使用它。
