複数のリンクを設定したい PHP Web ページを作成しています。誰かがリンクをクリックすると、別のページにリダイレクトせずに同じページで開きます。リンクを使用してフォームをポップアップするコードを以下に示しますが、リンクを追加すると、同じページに複数のウィンドウをポップアップしようとしても機能しません。
説明: 私のページには「私たちについて」、「使命」、「ビジョン」、「教員プロフィール」などの複数のリンクがあり、各リンクに対してポップアップ ウィンドウを表示したいのですが、私のコードは 1 つのリンクに対してしか機能しません。
私のPHPコード:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" href="styles.css" type="text/css" />
<title>Login Form</title>
<script type="text/javascript">
$(document).ready(function(){
$("#login_a").click(function(){
$("#shadow").fadeIn("normal");
$("#login_form").fadeIn("normal");
$("#user_name").focus();
});
$("#cancel_hide").click(function(){
$("#login_form").fadeOut("normal");
$("#shadow").fadeOut();
});
$("#login").click(function(){
username=$("#user_name").val();
password=$("#password").val();
$.ajax({
type: "POST",
url: "login.php",
data: "name="+username+"&pwd="+password,
success: function(html){
if(html=='true')
{
$("#login_form").fadeOut("normal");
$("#shadow").fadeOut();
$("#profile").html("<a href='logout.php' class='red' id='logout'>Logout</a>");
}
else
{
$("#add_err").html("Wrong username or password");
}
},
beforeSend:function()
{
$("#add_err").html("Loading...")
}
});
return false;
});
});
</script>
</head>
<body>
<?php session_start(); ?>
<div id="profile">
<?php if(isset($_SESSION['user_name'])){
?>
<a href='logout.php' id='logout' class="red" >Logout</a>
<?php }else {?>
<a id="login_a" href="javascript:void(0);" class="green">Login</a>
<?php } ?>
</div>
<div class="login_form">
<div class="err" class="add_err"></div>
<form action="login.php">
<label>User Name:</label>
<input type="text" id="name" name="name" />
<label>Password:</label>
<input type="password" id="pwd" name="pwd" />
<label></label><br/>
<input type="submit" id="login" class="green" value="Login" />
<input type="button" id="cancel_hide" class="red" value="Cancel" />
</form>
</div>
<div class="shadow" class="popup"></div>
<?php ?>
<div id="profile">
<?php if(isset($_SESSION['user_name'])){
?>
<a href='logout.php' id='logout' class="red" >Logout</a>
<?php }else {?>
<a id="login_a" href="javascript:void(0);" class="green">Login</a>
<?php } ?>
</div>
<div id="login_form">
<div class="err" class="add_err"></div>
<form action="login.php">
<label>User Name:</label>
<input type="text" id="name" name="name" />
<label>Password:</label>
<input type="password" id="pwd" name="pwd" />
<label></label><br/>
<input type="submit" id="login" class="green" value="Login" />
<input type="button" id="cancel_hide" class="red" value="Cancel" />
</form>
</div>
<div id="shadow" class="popup"></div>
</body>
</html>
私のCSSコード:
@charset "utf-8";
/* CSS Document */
.popup
{
position: fixed;
width: 100%;
opacity: 0.9;
top:0px;
min-height:200px;
height:100%;
z-index: 100;
background: #FFFFFF;
font-size: 20px;
text-align: center;
display:none;
}
#login_form
{
position:absolute;
width:700px;
top:100px;
left:37%;
background-color:white;
padding:10px;
border:2px solid #9f92e0;
display:none;
z-index:101;
-moz-border-radius: 10px;
-moz-box-shadow: 0 0 10px #aaa;
-webkit-border-radius: 10px;
-webkit-box-shadow: 0 0 10px #aaa;
}
.green {
background-color:#e6e6e6;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
color:#292229;
font-family:arial;
font-size:13px;
font-weight:bold;
padding:4px 14px;
text-decoration:none;
text-shadow:1px 1px 0px #9f92e0;
}.green:hover {
background-color:#72e893;
}.green:active {
position:relative;
top:1px;
}
.red {
background-color:#e6e6e6;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
display:inline-block;
color:#292229;
font-family:arial;
font-size:13px;
font-weight:bold;
padding:4px 14px;
text-decoration:none;
text-shadow:1px 1px 0px #de9295;
}.red:hover {
background-color:#f56a6a;
}.red:active {
position:relative;
top:1px;
}