Question

我有一个模块列表，显示所有可用的模块（从数据库中检索）。对于每个模块，都会有一个“订阅”按钮。我想要实现的是，当用户在登录帐户之前单击“订阅”时，页面将弹出登录框并让用户登录。如果他已经登录并单击“订阅”，则此模块应该被添加到他在数据库中的记录。

module_list.php

 <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <link href="css/default.css" rel="stylesheet" type="text/css" media="screen" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="js/default.js"></script>
    </head>
    <body>
<?php
          /* this part of code checks whether user has signed in. If he has, $_POST['userid'] will contain something, and checkuser will have value 1 (since userid is unique) */ 
                $user = mysql_query("SELECT * FROM users WHERE userid = '".$POST['userid']."'");    
                        $checkuser = mysql_num_rows($user);
                        if ($checkuser != 1)   // if checkuser is not 1 (user hasnt signed in), pop up sign in box
                        {
                    ?>
                            <div class="popup"> 
                            <a href="#" class="close">CLOSE</a>
                            <form>
                                <p><span class="title">Username</span> <input name="" type="text" /></p>
                                <p><span class="title">Password</span> <input name="" type="password" /></p>
                                <p><input name="" type="button" value="Login" /></p>
                            </form>
                            </div>
                    <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
                    <?php
                        }
                        $sql = mysql_query("SELECT * FROM module"); 
                        while ($result = mysql_fetch_array($sql))
                        {
                            echo '<div id="middle">';
                            echo '<div id="title_prof"><a href="module.php?module='.$result['code'].'">'.$result['code'].' '.$result['name'].'</a><br />';
                            $profid = mysql_query("SELECT * FROM teach WHERE modulecode = '".$result['code']."'");
                            $profidresult = mysql_fetch_array($profid);
                            $checkprofid = mysql_num_rows($profid);
                            if ($checkprofid == 1)
                            {
                                $prof = mysql_query("SELECT * FROM prof WHERE profid = '".$profidresult['profid']."'");
                                $profresult = mysql_fetch_array($prof);
                                echo '<i> by '.$profresult['name'].'</i></div>';
                                echo '<div id="date_button"> created on: '.substr($result['date'], 0, 10);
                                echo '<br /><input type="submit" id="subscribe" value="Subscribe" /></div>';
                            }

                            echo '</div>';
                            echo '<hr>';

                        }

                    ?>
                    </form>
                    </div>
                </div>

这是触发弹出窗口所需的jQuery： default.js

$(document).ready(function () {
$('#subscribe').click(function() {
          $("body").append('<div class="overlay"></div>');
        $(".popup").show();

        $(".close").click(function(e) {
            $(".popup, .overlay").hide();
        });
    });

问题是，当我按下“订阅”按钮时，页面会刷新但弹出窗口不显示。我是jQuery的新手，我怀疑问题可能是由于我的js代码。任何人都可以在这里点灯吗？

Answer 1

当在表单内按下提交按钮时，默认事件是将表单提交给服务器。要阻止您可以尝试的默认事件，

$('#subscribe').click(function(e) {
  e.preventDefault();//prevent form submission.
  ................... // your code
}

Answer 2

查看jquery对话框。这样听起来就像你想要的那样。链接： jquery dialog

jQuery用户登录弹出框

2 个答案: