需要jquery模態彈出指導。 我究竟做錯了什么？
[英]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>
2 個解決方案
解決方案1
1 已采納 2013-01-22 23:52:06
首先不要使用.live，升級jquery並使用
$(document.body).on({event:function(){},...},"selector"第二個不要使用追加，使用
$('<div../>').appendTo($(document.body));
（我相信您的錯誤來自第二位）
也可以制作一個打開框代碼的插件，然后使用.on一次綁定兩者
解決方案2
1 2013-01-22 23:56:56
對於初學者，您在此行上缺少雙引號：
<div id="links>
改成
<div id="links">
那應該修復您的鏈接。
然后，您應該執行mikakun所說的有關升級jquery和使用.on ，因為最好保持最新狀態。
我在這個jQuery鏈接中做錯了什么？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.