2011-01-13 9 views
0

私は以前にログインフォームで使用していたポップアップウィンドウコードを持っています。コードには、ページ内のポップアップが表示されます。Javascriptポップアップウィンドウ

これはコードです:

<?php 
//In Page Popup Box with Faded Background by Jerry Low @crankberryblog.com 
//Find other useful scripts at the Crankberry Blog 

//SETTINGS 
$fade_amount = 60;        //In Percentage 
$box_width = 400; 
$box_background = 'FFFFFF';    //Hex Color 
$box_border_width = 2; 
$box_border_color = '999999'; //Hex Color 
$close_box = 1;     //Do You Want The Close Bar on Top 1 = Yes, 0 = No 
$extension = "";    // Other Variables that maybe needed, page number etc. 

//Begin Popup Box 
$left_margin = (0 - ($box_width*0.5)); 
$page_url = basename($_SERVER['PHP_SELF']); 
if ($extension!="") $page_url .= '?' . $extension; 

if (isset($_GET['popup'])) { 
     echo '<div class="popup" style="width:'.$box_width.'px; background: #'.$box_background.'; margin-left:'.$left_margin.'px;'; 
     if ($box_border_width>1) echo ' border: '.$box_border_width.'px solid #'.$box_border_color.';'; 
     echo '">'; 

     //Close Box 
     if ($close_box===1) echo '<div class="popup_close"><a href="'.$page_url.'">Close (x)</a></div>'; 

     ?> 
     <!–- START YOUR POPUP CONTENT HERE -–> 

    Popup content goes in here! 

     <!–- END OF YOUR POPUP CONTENT HERE -–> 
     <?php 

     echo '</div> 
    <div class="fade" onclick="location.replace(\''.$page_url.'\');" style="opacity: 0.'.$fade_amount.'; -moz-opacity: 0.'.$fade_amount.';filter: alpha(opacity: '.$fade_amount.');"></div> 
    <div class="fade_container">'; 

} 

?> 

<a href="?popup=1<?php if ($extension!="") echo '&' . $extension; ?>">Activated Box</a> 

このコードでは、ポップアップを表示するためのパラメータ/引数を指定してページを再読み込みしたリンクが含まれています。私はポップアップを作るために、このコードを更新したい

は、これは私がこれまでにやっていることである、まだポップアップdoesnの `tショー

なし/非表示されます。

ここで、コードを次のように更新したいと考えています。

<link rel=StyleSheet href="css/popup.css" type="text/css" media=screen></link> 
<?php 
//In Page Popup Box with Faded Background by Jerry Low @crankberryblog.com 
//Find other useful scripts at the Crankberry Blog 

//SETTINGS 
$fade_amount = 60;        //In Percentage 
$box_width = 400; 
$box_background = 'FFFFFF';    //Hex Color 
$box_border_width = 2; 
$box_border_color = '999999'; //Hex Color 
$close_box = 1;     //Do You Want The Close Bar on Top 1 = Yes, 0 = No 
$extension = "";    // Other Variables that maybe needed, page number etc. 

//Begin Popup Box 
$left_margin = (0 - ($box_width*0.5)); 
$page_url = basename($_SERVER['PHP_SELF']); 
if ($extension!="") $page_url .= '?' . $extension; 

{ 
     echo '<div id="pop_up" class="popup" style="visibility:hidden; width:'.$box_width.'px; background: #'.$box_background.'; margin-left:'.$left_margin.'px;'; 
     if ($box_border_width>1) echo ' border: '.$box_border_width.'px solid #'.$box_border_color.';'; 
     echo '">'; 

     //Close Box 
     if ($close_box===1) echo '<div class="popup_close"><a href="#" ChangeStatus()>Close (x)</a></div>'; 

     ?> 
     <!–- START YOUR POPUP CONTENT HERE -–> 

    Popup content goes in here! 

     <!–- END OF YOUR POPUP CONTENT HERE -–> 
     <?php 

     echo '</div> 
    <div id="fade_div" class="fade" onclick="location.replace(\''.$page_url.'\');" style="visibility:hidden; opacity: 0.'.$fade_amount.'; -moz-opacity: 0.'.$fade_amount.';filter: alpha(opacity: '.$fade_amount.');"></div> 
    <div class="fade_container">'; 

} 

?> 

<a href="#" onClick="ChangeStatus()">Activated Box</a> 

<script> 
function ChangeStatus() 
{ 
    div = document.getElementById('fade_div').style.visibility; 
    popup = document.getElementById('pop_up').style.visibility; 
    alert(popup); 
    if(popup == "hidden") 
    { 
     div = "visible"; 
     popup = "visible"; 
    } 
    else 
    { 
     div = "hidden"; 
     popup = "hidden"; 
    } 
} 
</script> 

正常に動作しているので、CSSファイルは無視してください。

私はJSに問題があると思います。誰でも助けてくれますか?

答えて

1
はこれにあなたのjavascriptを変更

if(popup == "hidden") 
{ 
    document.getElementById('fade_div').style.visibility = "visible"; 
    document.getElementById('pop_up').style.visibility = "visible"; 
} 

else 
{ 
    document.getElementById('fade_div').style.visibility = "hidden" 
    document.getElementById('pop_up').style.visibility = "hidden"; 
} 
関連する問題