jquery.simplemodal-1.3.3.js : absolute positioning (vs. fixed)

Question

I'm using Eric Martin's sweet 'simplemodal' jQuery plugin. It works wonderfully and would recommend it to anyone looking for a lightweight jQuery-based modal dialogue solution.

That said, I have some particularly long content that "needs" to be displayed as a modal. By default, the container element uses 'overflow:auto' to handle content that is too long to fit within the browser window. This works well in most cases, but in this case I would like the dialogue to remain full height and scroll with the rest of the page (positioned 'absolute' vs. 'fixed'). I can get this working fairly easily by modifying any position: 'fixed' references in the source to position: 'absolute' but this sucks as it means ALL my modals will display this way...

Anyone have any thoughts on how to make this work gracefully?

Answer 1

try adding position:absolute to the actual modal call for that particular div region

like below

$("#somebutton").click(function() {

    $('#my-modal-content').modal({
        position:absolute
    });
});

I had the same issue as you, but I wanted a different size box for different buttons/functions and this is how I solved it. Good Luck!

Answer 2

Just have a scrollbar in the dialog itself.

Answer 3

It sounds like youre not adverse to adapting the source to you specific needs... therefore i would recommend reworking it so that you can supply the positioning and overflow properties via an options object.

Answer 4

You'd have to change the code significantly, especially the code that deals with IE (IE6 mainly).

Just changing to an absolute position would work initially for certain browsers, but some browsers or a page resize (in any browser) would revert back to a fixed position.