Using SimpleModal JS to create a modal to fill the browser window.

Question

I'm using the Simplemodal JQuery plugin in a project of mine. I'm trying to make the modal fill the full browser window though and seem to be having trouble. Setting the modal containers width and height to 100% explicitly from with in CSS does not see to be doing the trick.

I'm trying using the minWidth and minHeightoptions as well but that is still not working out. Any advice?

Answer 1

Just call modal with explicit css params passed:

$('#basicModalContent').modal({containerCss: {left: 0, top: 0, width: '100%', height: '100%'}});

Answer 2

Well, the modal is gonna have position: absolute, so you won't be able to use 100% width and height to fill the viewport.

This is from the simplemodal docs:

maxHeight [Number:null] The maximum height for the container. If not specified, the window height is used.

maxWidth [Number:null] The maximum width for the container. If not specified, the window width is used.

So when you instantiate a simplemodal, just add a really high number for these options. It should make it fill the viewport:

$("#element-id").modal({
  maxHeight: 10000,
  maxWidth: 10000
})

If this doesn't work, you can always get the height of the viewport with $(window).height() and $(window).width(). Then you could explicitly set the modal:

var windowHeight = $(window).height();
$('#modal-id').height( windowHeight );

You'd have to test all browsers, because it could look funky in some cases.

Answer 3

A jQuery "modal dialog" is just a div on the page that is on top of all the other elements, usually with a semi-transparent background that covers the rest of the area. An i-frame has constrained proportions.

You may be able to reference the parent.window, so the modal is not confined to the iframe area.

It may be easier to have some script on the parent page to execute the request.