我正在尝试使用CSS,HTML和jQuery创建一个登录框模式对话框窗口,但是登录框出现时没有单击“登录/登录”链接。我的HTML代码非常简单:
<a href="#login-box" class="login-window">Login / Sign In</a>
<div id="login-box" class="login-popup">
<a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>
<form method="post" class="signin" action="#">
<fieldset class="textbox">
<label class="username">
<span>Username or email</span>
<input id="username" name="username" value="" type="text" autocomplete="on" placeholder="Username">
</label>
<label class="password">
<span>Password</span>
<input id="password" name="password" value="" type="password" placeholder="Password">
</label>
<button class="submit button" type="button">Sign in</button>
<p>
<a class="forgot" href="#">Forgot your password?</a>
</p>
</fieldset>
</form>
</div>
<link rel="stylesheet" type="text/css" href="login.css" />
CSS更复杂:
#mask {
display: none;
background: #000;
position: fixed;
left: 0;
top: 0;
z-index: 10;
width: 100%;
height: 100%;
opacity: 0.8;
z-index: 999;
}
#login-popup {
display: none;
background: #333;
padding: 10px;
border: 2px solid #ddd;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%;
left: 50%;
z-index: 99999;
box-shadow: 0px 0px 20px #999;
/* CSS3 */
-moz-box-shadow: 0px 0px 20px #999;
/* Firefox */
-webkit-box-shadow: 0px 0px 20px #999;
/* Safari, Chrome */
border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px;
/* Firefox */
-webkit-border-radius: 3px;
/* Safari, Chrome */;
}
img#btn_close {
Position the close button
float: right;
margin: -28px -28px 0 0;
}
fieldset {
border: none;
}
form#signin #textbox label {
display: block;
padding-bottom: 7px;
}
form#signin #textbox span {
display: block;
}
form#signin p, form#signin span {
color: #999;
font-size: 11px;
line-height: 18px;
}
form#signin #textbox input {
background: #666666;
border-bottom: 1px solid #333;
border-left: 1px solid #000;
border-right: 1px solid #333;
border-top: 1px solid #000;
color: #fff;
border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
font: 13px Arial, Helvetica, sans-serif;
padding: 6px 6px 4px;
width: 200px;
}
form#signin input:-moz-placeholder {
color: #bbb;
text-shadow: 0 0 2px #000;
}
form#signin input::-webkit-input-placeholder {
color: #bbb;
text-shadow: 0 0 2px #000;
}
#button {
background: -moz-linear-gradient(center top, #f3f3f3, #dddddd);
background: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#dddddd));
background: -o-linear-gradient(top, #f3f3f3, #dddddd);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f3f3f3', EndColorStr='#dddddd');
border-color: #000;
border-width: 1px;
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
color: #333;
cursor: pointer;
display: inline-block;
padding: 6px 6px 4px;
margin-top: 10px;
font: 12px;
width: 214px;
}
#button:hover {
background: #ddd;
}
jQuery对我来说是新手,并且很可能会出现一些错误。
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js">
$(document).ready(function() {
$('a.login-window').click(function() {
var loginBox = $(this).attr('href');
//Fade in the Popup
$(loginBox).fadeIn(300);
//Set the center alignment padding + border see css style
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 or the mask layer the popup closed
$('a.close, #mask').live('click', function() {
$('#mask , .login-popup').fadeOut(300 , function() {
$('#mask').remove();
});
return false;
});
});
</script>
是否有人在该代码中看到可能导致问题的错误?如果是这样,请告诉我。
答案 0 :(得分:2)
问题在于HTML
<div id="login-box" class="login-popup">
和CSS
#login-popup {
display: none;
你在css选择器中使用#
是为了ids,但元素有一个类..
因此CSS规则应使用.
.login-popup {
display: none;
所有规则似乎都存在相同的错误..您在HTML中使用类但尝试使用CSS中的id选择器来定位它们