代码之家 › 专栏 › 技术社区 › Dutchie432

JQuery工具模式覆盖-在IE8中被破坏

modal-dialog internet-explorer-8 jquery-ui css jquery

Dutchie432 · 技术社区 · 16 年前

JS文件

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 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 回复 | 直到 16 年前

Dutchie432 16 年前

确认!添加以下内容可更正此问题

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

在我开始调试20小时后,我必须停止思考我自己的问题,但在我发布求助信息30秒后。

希望这也能帮助其他人。

marco 14 年前

<!doctype html>

nesX 13 年前

对不起,我的英语很差, 我在IE8中也有同样的问题,并且在IE8中使用compability而不是IE7,这是在IE7,8,9中的工作

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

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