在页面加载时隐藏div类

时间:2015-03-06 14:14:47

标签: javascript jquery html css hide

您好我有一个可见的注册表单,我试图在页面加载时隐藏它。所以我所做的就是将整个表单放在名为"注册"的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">&#215;</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

6 个答案:

答案 0 :(得分:1)

您正在寻找ID为“注册”的div,但这是类名。

$(function() {
  $(".signup").hide();
});

页面加载时会隐藏注册div。

然后,您可以在按钮点击事件中使用$(".signup").toggle();

如果你将它们结合起来,例如

$(function() {
  $(".signup").hide();

  $(".button").click(function() {
    $(".signup").toggle();
  });
});

然后该按钮正确显示注册块,并在页面加载时隐藏。

答案 1 :(得分:1)

你隐藏&#34;注册&#34; Div但尝试恢复&#34;模态&#34;格

这有效:

$('.button').click(function(){
      $('#signup').css('display','block');
      $('.modal-bg').fadeIn();
});

    $('#close').click(function(){
          $('.modal-bg').fadeOut();     
          $('#signup').toggle();
      return false;
    });

答案 2 :(得分:1)

你根本不需要注册div - 我认为这会让事情复杂化。只需启动隐藏的模态背景,然后在按钮点击代码之前添加:

$('.modal-bg').css('display','none');       

Example

<强>更新

在页面加载时停止显示表单我会添加一个js div:

在您的身体开放标记后:

<script>
   document.write('<div class="js">');
</script>
在你的身体结束标签之前

<script>
   document.write('</div>');
</script>

这允许您仅应用js样式,在本例中为modal-bg:

.js .modal-bg {display:none;}

然后你可以移除上面的js隐藏模态,因为它现在将在你的css中

updated codepen

答案 3 :(得分:0)

这是在页面加载时更改CSS的jQuery:

$('.signup').css({
  'display': 'none'
});

答案 4 :(得分:0)

第一种方法(CSS) - CodePen

#signup {

     display: none;
}

第二种方法(jQuery) - CodePen

$('#signup').hide();

答案 5 :(得分:0)

看起来你已经在你的codepen粘贴中找到了它?该代码与您的帖子不同......

无论如何,您在“登录”对话框中有3层div:
 #signup&gt; modal-bg&gt;模态

因此,如果您想在加载页面后隐藏#signup:

$(function() {
  $("#signup").hide();
});

然后你还需要在按钮事件中显示/隐藏#signup。

.modal-bg和#modal是#signup的子元素,所以如果你在隐藏中保持#signup,无论你对它做什么都会隐藏.modal-bg和#modal。

顺便说一句,我建议您使用FireBug或一般开发人员工具(在chrome / IE / FIrefox中点击F12)来检查HTML元素并检查出现了什么问题,至少我在代码中发现了问题。< / p>