使用 SimpleModal（jQuery 插件）显示弹出 iFrame，而无需不必要的滚动条答案

【问题标题】：Using SimpleModal (jQuery plugin) to display a popup iFrame without unnecessary scrollbars使用 SimpleModal（jQuery 插件）显示弹出 iFrame，而无需不必要的滚动条
【发布时间】：2010-04-28 00:30:11
【问题描述】：

我正在使用 SimpleModal：

http://www.ericmmartin.com/projects/simplemodal/

并根据示例显示 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
});

并且弹出窗口有两组组滚动条，一组可能用于代表弹出窗口的HTML 元素，另一组用于iFrame。试试demo看看：http://www.ericmmartin.com/projects/simplemodal/#examples

如果内容合适，我最好不要滚动条，否则只有一个垂直滚动条。

有什么想法吗？谢谢！

亚历克斯

【问题讨论】：

标签： jquery iframe popup simplemodal

【解决方案1】：

这仅适用于示例代码内容，即“eric.martin.com”，不确定是否可以控制其他外部内容的宽度，很可能不能:)

 containerCss:{
    backgroundColor:"#fff",
    borderColor:"#fff",
    height:450,
    padding:0,
    width:830,
    maxWidth : 800
},

【讨论】：

iframe 会显示我自己的内容，所以我可以控制它。
那么只需确保宽度比其内容宽几 px，这样您就只能得到垂直条
谢谢，让它工作。我不需要maxWidth，只需要在containerCss中设置宽度和高度比iFrame设置的宽度和高度略大。

【解决方案2】：

最简单的方法是让你的 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
});

【讨论】：