gpt4 book ai didi

javascript - 需要 jquery 模式弹出指导。我究竟做错了什么?

转载 作者:行者123 更新时间:2023-12-02 19:04:22 26 4
gpt4 key购买 nike

我正在创建一个网站,在该网站的一个页面(它是 .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 立即绑定(bind)两者

关于javascript - 需要 jquery 模式弹出指导。我究竟做错了什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14470088/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com