사용자 정의 의사 팝업으로 배경이 나타나지 않음

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

자바 스크립트 :

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

가 무엇을 할 수 있을까?

미리 도움 주셔서 감사합니다.

편집 : 어떤 시점에서 나는 loadPopup() 함수에 의해 추가 속성 불투명도 때문이라고 생각, 그래서 나는 코드의 일부를 제거 : 사이트 (초기 버전) here

UPDATE를 찾을 수 있습니다 ; 버그는 여전히 나타납니다 (처음에는 일시적 이었으므로 그 빈도는 낮지 만 확실하지는 않습니다).

Answer 1

나는 그 대답을하는 방법이 아니라 우리가 여기에서 묻고있는 코멘트에 이미지를 추가 할 수 없다는 것을 안다. 나는 이제 막 당신의 문제에 대해 생각해 봤다. 나는 아래 스크린 샷을 볼 수 없다. 올바른 출력인지 여부.