Search code examples
jqueryiframepopupsimplemodal

Using SimpleModal (jQuery plugin) to display a popup iFrame without unnecessary scrollbars

I'm using SimpleModal:

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

And displaying an iframe, as per the example:

// 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 two sets 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

Ideally I'd like no scrollbars if the content fits, otherwise a single vertical scrollbar.

Any ideas? Thanks!

  • Alex
Solution

  • 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 :)

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