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 :
 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" 
        />

Answer 1

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.

Answer 2

add this to your page that has the overlay:

<!DOCTYPE html>

Answer 3

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?

Answer 4

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);
            }
        });}

Answer 5

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.

友情链接