All geek questions in one place

JQuery Modal Overlay Tools - Broken in IE8

I have a jQuery modal overhead tool on my site and it works fine in both Chrome and Firefox ... however, when I view the page in IE8, a black background mask appears on top of the DIV dialog box. Also, the div is displayed at the bottom of the page where the actual code differs from the center on the screen.

In addition, I also get one of those Error on Line 1 Char 6 "errors, and I can’t debug this bad boy. I get a similar error in Chrome" Uncaught SyntaxError: Unexpected token), but this does not interfere with the modal. I feel that it is not connected, but with IE, you never know.

Any help would be greatly appreciated!

Js file

var api;

showDiv('partmodal');

function showDiv(v){

    if (!document.getElementById(v)) return;

    if (api)
        if (api.isOpened) api.close();

    api=$('#'+v).overlay({
        mask: {color: '#000000'}, 
        effect:'drop',
        api: true 
    }).load();

 }

OBJECT DIV

<div class="modalpart" id="partmodal">
    <h2>
        Title <!--It doesn't matter what you put here-->
    </h2>                                                                                
    <!--It doesn't matter what you put here-->
</div>

CSS

.modalPart {
    background-color:#fff;
    display:none;
    width:550px;
    padding:15px;
    text-align:left;
    border:2px solid #600;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    -moz-box-shadow: 0 0 50px #ccc;
    -webkit-box-shadow: 0 0 50px #ccc;
    position:fixed;
    _position:absolute; 
 }

 .modalpart h2 {
    background:url(images/logoac.png) no-repeat;
    margin:0px;
    padding:10px 0 10px 110px;
    border-bottom:1px solid #333;
    font-size:20px;
    color:#600;
    font-family:calibri, hevetica, tahoma, arial;
    text-align:right;
 }
+3
3

ACK! :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

20 , 30 , .

, - .

+9

, :

<!doctype html>
+3

Sorry, my English is very bad, I have the same problem in IE8 and I use compability, but IE8 is not IE7, this is whit ie7, 8, 9

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

div id = "# mask-modal"

        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
source

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

More articles:


All Articles