jquery pop up window trouble

이 jquery 함수를 사용하여 팝 윈도우를 표시하고 있습니다. 이 코드에서는 CSS id를 사용하여 단락 또는 div 특성을 올바르게 처리합니다. 하지만 난 내 HTML 파일에서 여러 번 사용하고 싶습니다, 그래서 나는 클래스의 ID를 변환해야합니다. 여기 jquery pop up window trouble

//0 means disabled; 1 means enabled; 
var popupStatus = 0; 

//loading popup with jQuery magic! 
function loadPopup(){ 
    //loads popup only if it is disabled 
    if(popupStatus==0){ 
     $("#backgroundPopup").css({ 
      "opacity": "0.7" 
     }); 
     $("#backgroundPopup").fadeIn("slow"); 
     $("#popupContact").fadeIn("slow"); 
     popupStatus = 1; 
    } 
} 

//disabling popup with jQuery magic! 
function disablePopup(){ 
    //disables popup only if it is enabled 
    if(popupStatus==1){ 
     $("#backgroundPopup").fadeOut("slow"); 
     $("#popupContact").fadeOut("slow"); 
     popupStatus = 0; 
    } 
} 

//centering popup 
function centerPopup(){ 
    //request data for centering 
    var windowWidth = document.documentElement.clientWidth; 
    var windowHeight = document.documentElement.clientHeight; 
    var popupHeight = $("#popupContact").height(); 
    var popupWidth = $("#popupContact").width(); 
    //centering 
    $("#popupContact").css({ 
     "position": "absolute", 
     "top": windowHeight/2-popupHeight/3.25, 
     "left": windowWidth/2-popupWidth/2 
    }); 
    //only need force for IE6 

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

} 


//CONTROLLING EVENTS IN jQuery 
$(document).ready(function(){ 

    //LOADING POPUP 
    //Click the button event! 
    $("#button").click(function(){ 
     //centering with css 
     centerPopup(); 
     //load popup 
     loadPopup(); 
    }); 

    //CLOSING POPUP 
    //Click the x event! 
    $("#popupContactClose").click(function(){ 
     disablePopup(); 
    }); 
    //Click out event! 
    $("#backgroundPopup").click(function(){ 
     disablePopup(); 
    }); 
    //Press Escape event! 
    $(document).keypress(function(e){ 
     if(e.keyCode==27 && popupStatus==1){ 
      disablePopup(); 
     } 
    }); 

});

는 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; 
} 
#popupContact{ 
display:none; 
position:fixed; 
_position:absolute; /* hack for internet explorer 6*/ 
width:470px; 
background:#FFFFFF; 
border:2px solid #cecece; 
z-index:2; 
padding:12px; 
font-size:13px; 
} 
#popupContact h1{ 
text-align:left; 
color:#6FA5FD; 
font-size:22px; 
font-weight:700; 
border-bottom:1px dotted #D3D3D3; 
padding-bottom:2px; 
margin-bottom:20px; 
} 
#popupContactClose{ 
font-size:14px; 
line-height:14px; 
right:6px; 
top:4px; 
position:absolute; 
color:#6fa5fd; 
font-weight:700; 
display:block; 
cursor: pointer; 
} 
#button{ 
text-align:left; 
}

여기에 HTML입니다 : 여기에 내 JS 파일입니다

<div id="button"><input type="submit" value="submit" /></div> 
<div id="popupContact"> 
     <a id="popupContactClose">x</a> 
     <h1>Description</h1> 
     <p id="contactArea"> 
      <?php echo $data['description'];?> 
     </p> 
</div> 
<div id="backgroundPopup"></div>

는 그것이로의 div 설정되어있을 때, 완벽하게 작동 css id.but 지금, 내가 '#'를 '.'로 변경하면 ID를 클래스로 만들면 작동하지 않습니다. 어떻게 작동 시키는가?

출처

2012-02-16 Shabib