jQuery用戶登錄彈出框

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對話框

jQuery用戶登錄彈出框

問題描述

2 個解決方案

解決方案1
0 2014-02-15 04:10:30

解決方案2
0 2014-02-15 05:04:52

jQuery用戶登錄彈出框

問題描述

2 個解決方案

解決方案1 0 2014-02-15 04:10:30

解決方案2 0 2014-02-15 05:04:52

解決方案1
0 2014-02-15 04:10:30

解決方案2
0 2014-02-15 05:04:52