All geek questions in one place

JQuery tools modal display mapping problems in IE6-8

I'm trying to make the overlay trendy. It works 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 virtually useless. I tried to debug this for a while and can't figure it out.

Here is a link to an example on his website: 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');
    }

};

What I mention when I call:

<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 modal:

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

    }
</style>

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

Screenshot 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" 
        />
+3
5

, , IE6 IE7 jQuery Tools.

div ".modal" div, , z-index, , .

div , , body, hey presto IE6 IE7.

, IMHO, , , IE6, , , jQuery.

+3

:

<!DOCTYPE html>
+1

z-index: 999; .? , div ? , html?

0

IE8, compability, IE8 IE7, <!DOCTYPE html> . :

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

The advice didn’t work for me, and to solve the problem I just needed to redefine the position attribute of ui-widget-overlay position for Absolute to work with IE 8, it does not depend 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 this helps.

0
source

Source: https://habr.com/ru/post/1748184/

More articles:


All Articles