[英]jquery modal popup guidance needed. What am I doing wrong?
我正在创建一个网站,并且在网站的一个页面(即.php)上有两个链接。 第一个读取寄存器,第二个读取登录。 我正在使用jquery创建一个弹出窗口,弹出的表单取决于单击的链接。 (我正在尝试这样做,但无法这样做)。 我总共有2个文件(logReg.php)和(popup.css)。
当我单击登录时,登录表单会按预期方式弹出,但是当我单击注册时,则不会弹出任何内容。 如果我颠倒了这些规则,那么如果我先放置用于注册的jquery代码,那么...将会弹出注册框,但不会登录。 我已经阅读了click()
函数的jquery API,但在我看来我所做的一切正确,但显然没有。 任何帮助将不胜感激。 顺便说一句,这不是我的代码的100%,我修改了为单个弹出窗口找到的代码。
logReg.php的内容
<html>
<head>
<!-- Typical stuff here. link to the popup.css & jquery.js -->
<title>MyPage</title>
<script type="text/javascript">
$(document).ready(function () {
$("a.login-window").click(function () {
//Getting the variable's value from a link
var loginBox = $(this).attr("href");
//fade in the popup
$(loginBox).fadeIn(300);
//set the center alignment padding
var popMargTop = ($(loginBox).height() + 24) / 2;
var popMargLeft = ($(loginBox).width() + 24) / 2;
$(loginBox).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Add the mask to body
$('body').append('<div id="mask"></div>');
$('mask').fadeIn(300);
return false;
});
//When clicking on the button close the pop closed
$('a.close, #mask').live('click', function() {
$('#mask, .login-popup').fadeOut(300, function() {
$('#mask').remove();
});
return false;
});
$("a.register-window").click(function () {
//Getting the variable's value from a link
var registerBox = $(this).attr("href");
//fade in the popup
$(registerBox).fadeIn(300);
//set the center alignment padding
var popMargTop = ($(registerBox).height() + 24) / 2;
var popMargLeft = ($(registerBox).width() + 24) / 2;
$(registerBox).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Add the mask to body
$('body').append('<div id="mask"></div>');
$('mask').fadeIn(300);
return false;
});
//When clicking on the button close the pop closed
$('a.close, #mask').live('click', function() {
$('#mask, .register-popup').fadeOut(300, function() {
$('#mask').remove();
});
return false;
});
});
</script>
</head>
<body>
<div id="links>
<a href="#login-box" class="login-window">Login</a>
<a href="#register-box" class="register-window">Register</a>
</div>
<div id="login-box" class="login-popup">
<form method="post" class="signin" action="">
<!-- All form stuff here -->
</form>
</div>
<div id="#register-box" class="register-popup">
<form method="post" class="signin" action="">
<!-- All form stuff here -->
</form>
</div>
</body>
</html>
首先不要使用.live,升级jquery并使用
$(document.body).on({event:function(){},...},"selector"
第二个不要使用追加,使用
$('<div../>').appendTo($(document.body));
(我相信您的错误来自第二位)
也可以制作一个打开框代码的插件,然后使用.on一次绑定两者
对于初学者,您在此行上缺少双引号:
<div id="links>
改成
<div id="links">
那应该修复您的链接。
然后,您应该执行mikakun所说的有关升级jquery和使用.on
,因为最好保持最新状态。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.