JQuery Tools Modal Overlay - broken in IE8_问答_开发者

JQuery Tools Modal Overlay - broken in IE8

开发者 https://www.devze.com 2023-01-04 14:30 出处：网络

I have a jQuery Tools Modal Overlay on my website, and it works perfectly fine in both Chrome and Firefox... however, when I view the page in IE8, the black background mask appears on top of the dialog DIV... in addition, the div appears at the bottom of the page where the actual code is as opposed to centered on the screen.

In addition, I'm also getting one of those "Error on Line 1 Char 6" Errors", and I can't seem to debug this bad boy. I get a similar error in Chrome "Uncaught SyntaxError: Unexpected token )" but it does not interfere with the modal. I have a feeling its unrelated, but with IE, you never know.

Any assistance would be so 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();

 }

DIV OBJECT

<div class="modalpart" id="partmodal">
    <h2>
        Title <!--It doesn't matter what you put here-->
    </h2>                                  开发者_如何学JAVA                                              
    <!--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;
 }

ACK! Adding the following corrected the issue

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

I gotta stop figuring out my own question 20 hours after I start debugging, but 30 seconds after I post for help.

Hopefully this will help someone else as well.

I had exactely the same problem and I solved it adding this line:

<!doctype html>

sorry my english is very bad, i have same problem in IE8, and use compability whit IE8 not IE7 , this is work 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);
                }
            });}