jquery.simplemodal-1.3.3.js：绝对定位（与固定）

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

This is what I do:

jQuery('#MyModal').modal({
    //options
});
jQuery('#MyModal').parents('.simplemodal-container').css('position', 'absolute');

Answer 3

对话框本身中只有一个滚动条。

Answer 4

听起来您对使源适应您的特定需求没有不利...因此，我建议您对其进行重新加工，以便您可以通过options对象提供定位和溢出属性。

Answer 5

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.