javascript - 在页面加载时隐藏 div 类

Question

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

Answer 1

您根本不需要注册 div - 我认为这会使事情复杂化。只需开始隐藏模态背景，所以在您的按钮点击代码之前添加:

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

Example

更新

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

在你的 body 开始标签之后:

<script>
   document.write('<div class="js">');
</script>

在你的 body 结束标签之前:

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

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

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

然后您可以删除上面的 js 以隐藏模态，因为它现在将在您的 css 中

updated codepen