[英]Hide div class on page load
您好我有一个可见的注册表单,我试图在页面加载时隐藏它。 所以我做的是将整个表单放在名为“signup”的div类中,然后用脚本代码隐藏它。
更新:HTML
<script>
document.write('<div class="js">');
</script>
<span class="button">Sign In</span>
<div id="signup">
<div class="modal-bg">
<div id="modal">
<span>Sign In<a href="#close" id="close">×</a></span>
<form>
<input id="username" name="username" type="textbox" placeholder="Username" required>
<input id="password" name="password" type="password" placeholder="Password" required>
<a id="forgot-link" href="#">Forgot password?</a>
<button name="submit" id="submit" type="submit">Sign in</button>
</form>
</div>
</div>
</div>
<script>
document.write('</div>');
</script>
我的JS代码(没有隐藏功能):
$('.button').click(function(){
$('#modal').css('display','block');
$('.modal-bg').fadeIn();
});
$('#close,.modal-bg').click(function(){
$('.modal-bg').fadeOut();
$('#modal').fadeOut();
return false;
});
即使隐藏/出现似乎有效,如果我点击它,表单也会被隐藏。 这是一个问题,因为如果他们无法在表单上键入/单击,则无人注册。 (问题已修复)
这是codepen(实时版): http ://codepen.io/mariomez/pen/WbgrNK
您正在寻找ID为“注册”的div,但这是类名。
$(function() {
$(".signup").hide();
});
将在页面加载时隐藏注册div。
然后你可以使用$(".signup").toggle();
在按钮单击事件上。
如果你将这些结合起来,例如
$(function() {
$(".signup").hide();
$(".button").click(function() {
$(".signup").toggle();
});
});
然后该按钮正确显示注册块,并在页面加载时隐藏。
你隐藏“注册”Div但尝试恢复“模态”div
这有效:
$('.button').click(function(){
$('#signup').css('display','block');
$('.modal-bg').fadeIn();
});
$('#close').click(function(){
$('.modal-bg').fadeOut();
$('#signup').toggle();
return false;
});
你根本不需要注册div - 我认为它使事情变得复杂。 只需启动隐藏的模态背景,然后在按钮单击代码之前添加:
$('.modal-bg').css('display','none');
更新
在页面加载时停止显示表单我会添加一个js div:
在你的身体打开标签后:
<script>
document.write('<div class="js">');
</script>
在你的身体结束标记之前:
<script>
document.write('</div>');
</script>
这允许您仅应用js样式,在本例中为modal-bg:
.js .modal-bg {display:none;}
然后你可以删除上面的js隐藏模态,因为它现在将在你的CSS中
这是在页面加载时更改CSS的jQuery:
$('.signup').css({
'display': 'none'
});
看起来你已经在你的codepen粘贴中找到了它? 该代码与您的帖子不同...
无论如何,您在“登录”对话框中有3层div:
#signup> modal-bg> modal
因此,如果您想在加载页面后隐藏#signup:
$(function() {
$("#signup").hide();
});
那么你还需要在按钮事件中显示/隐藏#signup。
.modal-bg和#modal是#signup的子元素,所以如果你保持隐藏的#signup,无论你对它们做什么,都会隐藏.modal-bg和#modal。
顺便说一句,我建议你使用FireBug或一般开发人员工具(在chrome / IE / FIrefox中点击F12)来检查HTML元素并检查出错的地方,至少我在代码中发现了问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.