jQuery用户登录弹出框
[英]jQuery User Sign-In Popup Box
问题描述
I have a module list which shows all the modules available (retrieve from database). 
我有一个模块列表，其中显示了所有可用的模块（从数据库中检索）。 For every module, there will be a "subscribe" button. 对于每个模块，都会有一个“订阅”按钮。 What I want to achieve is that when user click "subscribe" before logging into the account, the page will pop up a sign in box and let user sign in. Whereas if he has already signed in and click "subscribe", this module should be added to his record in the database. 我要实现的是，当用户在登录帐户之前单击“订阅”时，页面将弹出一个登录框，并让用户登录。而如果他已经登录并单击“订阅”，则该模块应该被添加到他在数据库中的记录。
module_list.php 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>
This is the jQuery needed to trigger the pop up: default.js 这是触发弹出窗口所需的jQuery： default.js
$(document).ready(function () {
$('#subscribe').click(function() {
$("body").append('<div class="overlay"></div>');
$(".popup").show();
$(".close").click(function(e) {
$(".popup, .overlay").hide();
});
});
The problem is, when I press "subscribe" button, the page refreshes but pop up is not showing . 问题是，当我按下“订阅”按钮时，页面会刷新，但弹出窗口没有显示 。 I am new to jQuery and I suspect the problem maybe due to my js code. 我是jQuery的新手，我怀疑这个问题可能是由于我的js代码引起的。 Anyone can shed some lights here? 任何人都可以在这里开灯吗？
2 个解决方案
解决方案1
0 2014-02-15 04:10:30
When a submit button is pressed inside the form the default event is to submit the form to the server. 在表单内部按下提交按钮时，默认事件是将表单提交到服务器。 To prevent the default event you could try, 为了防止发生默认事件，您可以尝试，
$('#subscribe').click(function(e) {
e.preventDefault();//prevent form submission.
................... // your code
}
解决方案2
0 2014-02-15 05:04:52
Look into jquery dialog. 查看jQuery对话框。 Sounds like this will do exactly what u want. 听起来这将完全满足您的要求。 Link : jquery dialog 链接： jQuery对话框
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.