SimpleModal - Can still scroll behind modal after setting modal: true

So I am using SimpleModal (http://www.ericmmartin.com/projects/simplemodal/)

and I can't seem to get it to block scrolling behind the modal.

modal [Boolean:true] User will be unable to interact with the page below the modal or tab away from the dialog. If false, the overlay, iframe, and certain events will be disabled allowing the user to interact with the page below the dialog.

function getStatus(baseURL, programID, appID){
var src = baseURL + "/admin/statepost/" + programID + "/" + appID ;
$.modal('<iframe id="statusIframe" src="' + src + '" height="1000" width="800" style="border:10px">', {
    escClose: false,
    modal: true,
    overlayClose: false,
    containerCss:{
        backgroundColor:"#000",
        borderColor:"#fff",
        padding:0
    }
});

}

you will see I have modal: true but I still can scroll behind the modal. is there something I am missing?

Solution

I'm not familiar with this plugin but I would guess it has something to do with the iframe in your modal.

That said, you can use the onOpen() and onClose() callbacks to achieve this.

  onShow: function(dialog) {
    $("body").addClass("no-scroll");
  },
   onClose: function(dialog) {
    $("body").removeClass("no-scroll");
    $.modal.close(); //Must call this for the plugin to work
  },

The CSS for your <body> element is straightforward:

.no-scroll {
  margin: 0;
  height: 100%;
  overflow: hidden
}

I put an example up on JSFiddle here.