Question

在我的所有页面中，我都有一个文本作为按钮，如果只是单击它，它将在弹出的div中显示登录表单。如果用户重新加载页面，则会自动关闭此弹出窗口div。

现在我在config.php文件中有一个函数作为登录的配置。如果登录失败，则在登录表单的下方或底部会出现“登录失败”的通知。

问题是因为只有当用户点击页面中的“登录”按钮时才会显示此登录表单，因此当它重定向回来时，它不会自动告诉用户他/她是否登录失败。用户必须再次单击登录按钮以了解登录是否失败。

以下是用户知道登录失败的行：

 <p><?php if($_GET['result']=='failed'){echo 'invalid login';}?></p>

这是登录框的完整代码，用户必须单击登录按钮才能显示登录表单的弹出窗口：

        <li>
            <a href = "javascript:void(0)"
               onclick ="document.getElementById('light').style.display='block';
                         document.getElementById('fade').style.display='block'">Login</a></li>
    </ul>

    <!--Black Overlay-->        
    <div id="fade" class="black_overlay" onLoad="initDynamicOptionLists()"></div>

    <!--Pop Up Div-->       
    <div id="light" class="white_content">

    <div id="loginbox">
        <span id="login-form">Login</span>
            <form method="post" action="config-login.php">
                <table width="345" align="center" style="background:honeydew; vertical-align:top; margin:0px auto; border:solid medium yellowgreen;">
                    <tr>
                        <td class="myimage">Email :</td>
                        <td width="196" style="padding-right:2px;"><input type="text" name="member_email" style="width:100%"/></td></tr>

                    <tr>
                        <td class="myimage">Password : </td>
                        <td style="padding-right:2px;"><input type="password" name="member_password" style="width:100%"/></td></tr>

                </table>

                    <div style="background:greenyellow; display:block; width:100%; overflow:hidden; margin:10px 0; padding:10px 0;">

                        <input type="hidden" name="return" value="<?php echo $_SERVER['REQUEST_URI']; ?>" />

                        <p><?php 
                            if($_GET['result']=='failed'){
                            echo 'invalid login';
                            }?>
                        </p>

                        <input class="myimage" style="margin-right:10px; padding:0 10px; float:right;" type="submit" value="Login"/>

                        <span style="position: absolute; top: 11px; right:1px; color:white;" id="closeBlocked">
                            <a style="color:green; text-decoration:none; background:white; padding:10px;" 
                               href = "javascript:void(0)" 
                            onclick ="document.getElementById('light').style.display='none';
                                      document.getElementById('fade').style.display='none'"><b>X</b></a></span>
                    </div>
            </form>

    </div>

    </div>
    <!-- End of Pop Up Div-->

   <?php
   session_start();

   // include connection file
   include("configPDO.php");

  $member_email=$_POST['member_email']; 
  $member_password=$_POST['member_password']; 
  $return = mysql_real_escape_string($_POST['return']);

  $STM = $dbh->prepare("SELECT * FROM customer WHERE member_email = :member_email AND member_password = :member_password");

 $STM->bindParam(':member_email', $member_email);
 $STM->bindParam(':member_password', $member_password);

 $STM->execute();

 $count = $STM->rowCount();

 $row  = $STM -> fetch(PDO::FETCH_ASSOC);

 if ( $count == 1 )  {
     session_start();
     $_SESSION['login_id'] = $row['member_id'];
     $_SESSION['member_name'] = $row['member_name']; // added
     $_SESSION['member_email'] = $row['member_email']; // added
            //echo 'SESSION =' .$_SESSION['myusername'];              
            //echo 'ROW =' .$row['myusername'];
            //var_dump($row);
    if ( $_SESSION['login_id'] != '' || $_SESSION['login_id'] > 0 ) { // edited
        header("Location: http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']);   
    } else { 
        header("location:index.php"."?result=failed");  
    }
}



 else 
 {
 header("location:index.php"."?result=failed");
 }
 $dbh = null;
 ?>

Answer 1

你可以借助你的变量来实现这个目标

只需将ID添加到

即可

    <a href = "javascript:void(0)"
           onclick ="document.getElementById('light').style.display='block';
                     document.getElementById('fade').style.display='block'">Login</a>

    like

    <a id="popmeup" href = "javascript:void(0)"
           onclick ="document.getElementById('light').style.display='block';
                     document.getElementById('fade').style.display='block'">Login</a>

and put code at the end of document before end of body tag
    <?php 
    if($_GET['result']=='failed'){ ?>
        <script type="text/javascript">
            document.getElementById('popmeup').click();     
        </script>
    <?php   }?>

Answer 2

如果您希望在重新加载页面后重新显示该框，则可以使用window.onload功能执行此操作。

<?php if ( ! empty($_GET['result']) && $_GET['result'] == 'failed' ): ?>

<script>
    function showLogin() {
        document.getElementById('light').style.display='block';
        document.getElementById('fade').style.display='block';
    }

    window.onload = showLogin;
</script>

<?php endif; ?>

<!--Black Overlay-->        
<div id="fade" class="black_overlay" onLoad="initDynamicOptionLists()"></div>

<!--Pop Up Div-->       
<div id="light" class="white_content">

编辑：更新了脚本标记，oops。

Answer 3

您可以在URL中使用哈希并使用JavaScript检查。额外奖励：如果登录表单低于用户浏览器窗口的折叠，它将自动滚动到那里。

在您的PHP文件中，将#loginbox添加到重定向：header('Location: index.php?result=failed#loginbox');。

然后，您可以检查登录框是否应显示window.location.hash。

这样的事情应该有效：

if (window.location.hash == 'loginbox') {
  document.getElementById('loginbox').style.display = 'block';
}

您甚至可以使用:target伪类来显示登录框（我认为这适用于大多数现代浏览器）。

只需将此文件添加到CSS文件即可：

#loginbox:target {
  display:block;
}

修改

刚才看到你可能隐藏了ID为light而不是灯箱的div。您应该根据您隐藏的实际ID调整id（通过CSS display:none;，我猜）。

重定向回页面时，弹出框保持显示状态

3 个答案: