开发者

pop up not showing in IE 6

hi i am using jquery to show a pop up , it works on every browser except IE 6 . can 't figure out what is the reason . this is my code , please help .............

function showCalendar(){ 
    $('body').prepend('<div id="overlay"></div>');
    if($.browser.msie && $.browser.version=="6.0"){
        $('#overlay').append('<iframe></iframe>');
    }
    $('#overlay').height($(document).height());
    $('body').append('<div id="popupwrapper"><div id="calendar"></div></div>');

    if (calculated.calendar) {
        $('#calendar').emeCalendar(calculated.calendar);
    }

    $('#calendar div.header div.clearboth').before('<span class="close">Close</span>');

    $('#calendar div.header span.close').click(function(){
        $('#overlay').remove();
        $('#popupwrapper').remove();
    });

}

Update

this is my css

#overlay {
    position : absolute;
    z-index : 5000;
    left : 0px;
    top : 0px;
    width : 100%;
    background-color : #000;
    opacity : 0.5;
}


#popupwrapper {
    position : fixed;
    z-index : 6000;
    left : 50%;
    width : 800px;
    margin-left : -400px;
    top : 20%;
    background-color : #f2efe6;
    border : 3px solid #FFF;
}


    #popupwrapper span.close{
        float : right;
        cursor : pointer;
    }


    #calendar {
开发者_运维技巧        width : 100%;
    }
        #calendar table {
            width : 100%;
            border-spacing : 10px;
            font-size : 10px;
        }

        #calendar table td {
            background-color : #fff;
            padding : 3px 3px 10px 3px; 
        }
            #calendar table td.empty {
                background-color : transparent;
            }

        #calendar div.date {
            background-color : #5a4530;
            color : #FFF;
            text-align : right;
            font-weight : bold;
            padding : 2px;
        }
        #calendar div.offer {
            color : #5b4530;
            border-bottom : 1px solid #5b4530;
            padding-top : 8px;
        }
        #calendar div.room {
            clear : left;
            float : left;
            padding-top : 2px;
        }
        #calendar div.cost {
            clear : right;
            float : right;
            padding-top : 2px;
        }
        #calendar div span {
            padding : 2px;
        }


Try switching append to appendTo and prepend to prependTo - and - of course, the order of the dom reference (this).append(other) vs (other).appendTo(this)

IE has some funky behavior with DOM manipulation - jQuery has most of the quirks ironed out but a few remain. I ran into this very issue on another project, and this idea did the trick for me.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜