javascript - 自定义伪弹出窗口不显示背景

Question

我对伪弹出窗口的背景有疑问。我使用 jQuery (1.7) 和 this tutorial在我的网站中创建弹出窗口。基本上我有两个未显示的预格式化 div(一个半透明以隐藏页面的其余部分，另一个 - 以图像作为背景 - 包​​含实际的弹出窗口，CSS 已经加载到页面中)当我需要它们显示弹出窗口时，我会显示，并为第二个 div 添加额外的填充物(以具有不同的弹出窗口)。

我的问题是弹出窗口的背景没有加载，最后我只得到半透明的背景和弹出窗口的内容。但是，如果在控制台中禁用/启用 CSS 背景属性，背景会重新出现，因为它应该首先出现。

这个问题是最近才出现的，不是在对实际的弹出功能进行任何修改之后出现的，所以我真的不知道它可能来自哪里。这不可能是背景图片尚未加载的问题，因为它在页面加载时已经存在。

相关代码:

HTML:

<div id='popup_container'></div>
<div id='backgroundPopup'></div>

CSS:

#backgroundPopup{
    display:none;
    position: fixed;
    _position:absolute; /* hack for internet explorer 6*/
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: #000000;
    border: 1px solid #cecece;
    z-index: 1;  
}

#popup_container{
    display: none;
    position: fixed;
    _position:absolute; /* hack for internet explorer 6*/
    height: 526px;
    width: 718px;
    background: url(http://cdn.mojogroups.com/Layout/popup.png) no-repeat !important;
    z-index: 2;
    color: #000000;
}

Javascript:

//When initializing the page
$(document).ready(function(){

//[...]

popup = new Popup();
popup.initialize();

}

function Popup(){
var popupStatus = 0;



function togglePopup(){
    if(popupStatus == 0){
        centerPopup();
        loadPopup();
    }
    else
        disablePopup();
}

function loadPopup(){
    if(popupStatus == 0){
        $('#backgroundPopup').css({
            "opacity": "0.7"
        });
        $('#backgroundPopup').fadeIn("fast");
        $('#popup_container').fadeIn("fast");
        $('body').scrollTop(0);
        $('body').css('overflow', 'hidden');
        popupStatus = 1;
    }
}

this.disablePopup = function(){
    if(popupStatus == 1){
        $('#backgroundPopup').fadeOut("fast");
        $('#popup_container').fadeOut("fast");
        $('#popup_container').empty();
        $('body').css('overflow', 'auto');
        popupStatus = 0;
    }
}

function centerPopup(){
    var windowWidth = document.documentElement.clientWidth;  
    var windowHeight = document.documentElement.clientHeight;
    var popupHeight = $('#popup_container').height();
    var popupWidth = $('#popup_container').width();


    $('#popup_container').css({
        "position": "absolute",
        "top": windowHeight/2 - popupHeight/2,
        "left": windowWidth/2 - popupWidth/2
    });

    $('#backgroundPopup').css({
        "height": windowHeight
    });
}

this.initialize = function(){
    $('#backgroundPopup').click(function(){
        popup.disablePopup();
    });

    $(document).keypress(function(e){
        if(e.keyCode==27)
            popup.disablePopup();
    });
}

this.contacts = function(){
    //Fill the popup container...
        centerPopup();
    loadPopup();
    popupDiv.fadeIn('fast');
}

它会是什么？

预先感谢您的帮助!

编辑:可以找到网站(早期版本)here

更新:在某些时候我认为这是由于 loadPopup() 函数添加的不透明度属性，所以我删除了那部分代码；但错误仍然出现(虽然可能不太频繁，但很难确定，因为它首先是暂时的)。

Answer 1

我知道这不是回答查询的方法，但我不能在评论中添加图片所以我在这里问。我刚刚解决了你的问题，我得到的是你看不到下面的屏幕截图。是否正确输出。