jQuery tools modal overlay display problem in IE6-8

Question

I'm trying to enable the overlay to be modal. It works perfectly fine in FireFox, but the window object is behind the mask when it becomes modal. This prevents any interaction with it and the page is actually useless. I've tried debugging this for a while and can't figure it out.

Here is a link to the example on their site: http://flowplayer.org/tools/demos/overlay/modal-dialog.html

$.fn.cfwindow = function(btnEvent,modal,draggable){
    //error checking
    if(btnEvent == ""){
        alert('Error in window :\n Please provide an id that instantiates the window. ');
    }   

    if(!modal && !draggable){
        $('#'+btnEvent+'[rel]').overlay();
        $('#content_overlay').css('cursor','default');
    }

    if(!modal && draggable){
        $('#'+btnEvent+'[rel]').overlay();
        $('#content_overlay').css('cursor','move');
        $('#custom').draggable();
    }

    if(modal){
        $('#'+btnEvent+'[rel]').overlay({
            // some mask tweaks suitable for modal dialogs
            mask: {
                color: '#646464',
                loadSpeed: 200,
                opacity: 0.6
            },
            closeOnClick: false
        }); 
        $('#content_overlay').css('cursor','default');
        $('#custom').addClass('modal');
    }

};

That's what I'm referencing when I call through:

<script type="text/javascript">         
    $(document).ready(function(){
        $(document).pngFix();
        var modal = <cfoutput>#attributes.modal#;
        var drag = #attributes.draggable#;
        var btn = '#attributes.selector#';
        var src = '#attributes.source#';

        var wid = '#attributes.width#';

        $('##custom').width(parseInt(wid));

        $('div##load_content').load(src);
        $('##custom').cfwindow(btn,modal,drag,wid);
    });
</script>

CSS for the modal:

<style type="text/css">
    .modal {
        display:none;
        text-align:left;                
        background-color:#FFFFFF;
        -moz-border-radius:6px;
        -webkit-border-radius:6px;

    }
</style>

Exclude the and the additional pound signs, IE. "##".

Screen shot of the problem: http://twitpic.com/1tak06

Note: IE6 and IE8 have the same problem.

Any help would be appreciated.

Update: HTML of the overlay/modal window:

            <div class="simple_overlay" id="custom">
                <div id="content_overlay">
                   <div id="handler">
                        <div id="headerss">
                            <h5 class="titless"><span style="color:##000000;">#attributes.title#</span></h5>
                            <div class="yellowRule"></div>
                        </div>
                        <div id="load_content">    

                        </div>              
                    </div>
                </div>
            </div>

Updated: Add front end

    <!-- overlay triggers. overlay is referenced in the 'rel' attribute -->
    <p>

        <button rel="#custom" type="button" id="openWindow">Email</button>
    </p>

    <cf_eo_window2 
        title="This modal isn't working in IE!"
        selector="openWindow"
        draggable="false"
        width="350"
        modal="true"
        source="import-test.cfm" 
        />

score 3 · Answer 1 · answered Jan 02 '11 at 21:36

I know this is quite an old question, but I've just overcome the exact some problem in IE6 & IE7 with jQuery Tools overlay.

My div with the class of ".modal" was nested inside a container div which had a relative position, so the z-index setting I was trying to force on the modal class was having no effect at all.

I moved the modal div outside of any containers, in my case to the very bottom of the page just before the closing body tag, and hey presto a very nice overlay in IE6 & IE7.

I did have to copy some styling from my container class into my modal class, but a very small annoyance IMHO to get the desired result for my client who still has a significant number of site visitors using IE6, and certainly a quicker solution than implementing a totally different jQuery plug-in.

position:relative definitely does make flowplayer overlay go wacky in IE! — mnsr, Sep 13 '11 at 01:23

score 1 · Answer 2 · answered Jul 22 '12 at 15:21

1

add this to your page that has the overlay:

<!DOCTYPE html>

answered Jul 22 '12 at 15:21

Jorge

11
1

nesX · Answer 3 · 2013-01-25T18:02:18.947

i have same problem in IE8, and use compability whit IE8 not IE7 , <!DOCTYPE html> not work for me. i create a custom mask :

#mask-modal{
position:absolute;
z-index:9000;
background-color:#fff;
display:none;
}

<div id="#mask-modal"></div>

    if (jQuery.browser.msie == true && jQuery.browser.version == 8) {
        /* Carga el overlay confirmar */
        jQuery("#modalconfirmar .modalInput").overlay({
            // Calcula el centro de la ventana
            top : ((jQuery(parent.document).height() / 2) - (jQuery("#modalconfirmar").innerHeight() + 180 )),
            closeOnClick: false,
            onBeforeLoad: function(){
                // @TODO cargar mask custom

                //Get the screen height and width
                var maskHeight = $(document).height();
                var maskWidth = $(window).width();

                //Set height and width to mask to fill up the whole screen
                $('#mask-modal').css({
                    'width':maskWidth,
                    'height':maskHeight
                });

                $('#mask-modal').fadeTo(500,0.6);
                // Load page into iframe
                jQuery(document.body).css('overflow', 'hidden');
            },
            onLoad : function(){
                jQuery("#modalconfirmar").css('z-index', jQuery("#mask-modal").css('z-index') + 10 );
            },
            onClose : function(){
                jQuery("#modalconfirmar .si").off();
                $('#mask-modal').fadeOut(400);
            }
        });}

score 0 · Answer 4 · answered May 28 '14 at 06:06

The tip didn't work for me, and to resolve the problem, i just had to redefine the ui-widget-overlay position attribute to Absolute to work with IE 8, this is don on the open function of my dialog.

$dialog.dialog( { ..... ,open: function() {$('.ui-widget-overlay').css('position', 'absolute');} ,close: function() {$('.ui-widget-overlay').css('position', 'fixed');} ....}); Hope it can help.

edl · Answer 5 · 2010-06-02T16:12:33.090

0

Have you tried adding a z-index:999; to your .modal? I assume your div has a class name of modal? Can I see how you have your html set up?

edited Jun 02 '10 at 16:12

answered Jun 02 '10 at 16:05

edl

3,194
22
23

Yeah. I tried adding the z-index already. I'll add the HTML right now. – Michael Stone Jun 02 '10 at 16:41
Wow, that's a lot of divs. Your problem may be in that you have nested your modal div within your overlay div. The beauty of modal scripts is that it generally ignores structure, as long as it knows where to get the contents, IE the form and the overlay. Try pulling out the portion that is your modal and see if you get better results. – edl Jun 02 '10 at 17:19
Thanks for the input. I tried that and it makes no impact. Also, each set of divs plays a specific role in the custom design of the window. I've tried stripping it down to the basics and yet, still nothing. – Michael Stone Jun 02 '10 at 17:35
Then you've got me stumped. What has me particularly confused is that the only place I've see you call `overlay()` is on `$('#'+btnEvent+'[rel]')` and I don't see anything with a rel attribute unless i've overlooked it. Sorry I can't be of more help. – edl Jun 02 '10 at 18:09
Sorry about that. That was the back end of what was going on. It's not much, but I'll add the rest. The front end deals with a button and the implementation of a ColdFusion custom tag I developed which makes implementing this window easier. I'll post that above. – Michael Stone Jun 02 '10 at 18:41
Ahh. In that case, shouldn't it be something like `$('#openWindow').overlay()`? – edl Jun 02 '10 at 19:29
That's what it is, but using the variable allows it to be more generic and reusable across our large site. The variable being passed in is an attribute we define when we instantiate the window/overlay. See the updated front end portion. You'll see where I'm passing in openWindow into the "selector" attribute. – Michael Stone Jun 02 '10 at 19:42
Ahh. I see. Sorry, not familiar with CF. I guess the #attributes.variable# gets replaced by the CF? I'm out of ideas so far. Let me know if you ever resolve this. On another note, have you considered just using a plain JQuery UI dialog or is there a reason you want to stick with the flowplayer variety? – edl Jun 02 '10 at 20:17
jQuery tools overlay is a bit smaller than jQuery UI. We're really looking for performance, but if it comes down to quality, then we might require to go with the jQuery UI dialog. The UI is a very large file, but it's also very powerful and works very well. I'm hoping to find something that works minimally just as well. – Michael Stone Jun 02 '10 at 20:42
jQuery automatically sets the z-index to 9999 for any loaded overlay. – JellicleCat Mar 14 '12 at 22:04

jQuery tools modal overlay display problem in IE6-8

5 Answers5