0

我正在构建一个 PHP 网页，我希望在该网页上有多个链接。如果有人点击一个链接，它会在同一页面上打开，而不会重定向到另一个页面。代码如下所示，我使用链接弹出表单，但问题是当我添加更多链接时，尝试在同一页面上弹出多个窗口它不起作用。

描述：我的页面有多个链接，如“关于我们”、“使命”、“愿景”、“教师简介”，我希望每个链接都有一个弹出窗口，但我的代码只适用于一个。

我的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;
}
4

0 回答 0