使用 SimpleModal（jQuery 插件）显示一个没有不必要滚动条的弹出 iFrame
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2726087/
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
Using SimpleModal (jQuery plugin) to display a popup iFrame without unnecessary scrollbars
提问by Alex Black
I'm using SimpleModal:
我正在使用 SimpleModal：
http://www.ericmmartin.com/projects/simplemodal/
http://www.ericmmartin.com/projects/simplemodal/
And displaying an iframe, as per the example:
并显示一个 iframe，如示例所示：
// Display an external page using an iframe
var src = "http://365.ericmmartin.com/";
$.modal('<iframe src="' + src + '" height="450" width="830" style="border:0">', {
closeHTML:"",
containerCss:{
backgroundColor:"#fff",
borderColor:"#fff",
height:450,
padding:0,
width:830
},
overlayClose:true
});
And the popup has twosets of scrollbars, one perhaps for the HTML element representing the popup, and one for the iFrame. Try the demo to see: http://www.ericmmartin.com/projects/simplemodal/#examples
并弹出有2套滚动条，一个或许对于HTML元素代表的弹出窗口，以及一个用于内嵌框架。尝试演示以查看：http: //www.ericmmartin.com/projects/simplemodal/#examples
Ideally I'd like no scrollbars if the content fits, otherwise a single vertical scrollbar.
理想情况下，如果内容适合，我不希望滚动条，否则只有一个垂直滚动条。
Any ideas? Thanks!
有任何想法吗？谢谢！
- Alex
- 亚历克斯
回答by Puaka
This only work for the sample code content i.e "eric.martin.com", not sure if you can control the width for other external content, most probably can't :)
这仅适用于示例代码内容，即“eric.martin.com”，不确定您是否可以控制其他外部内容的宽度，很可能不能:)
containerCss:{
backgroundColor:"#fff",
borderColor:"#fff",
height:450,
padding:0,
width:830,
maxWidth : 800
},
回答by scott
The easiest way is to make your iframe a little smaller than the modal dimensions.
最简单的方法是让 iframe 比模态尺寸小一点。
var src = "http://365.ericmmartin.com/";
$.modal('<iframe src="' + src + '" height="430" width="810" style="border:0">', {
closeHTML:"",
containerCss:{
backgroundColor:"#fff",
borderColor:"#fff",
height:450,
padding:0,
width:830
},
overlayClose:true
});
