在页面加载时隐藏 div class

Question

您好，我有一个可见的注册表单，我正试图在页面加载时隐藏它。所以我所做的是将整个表单放在一个名为 "signup" 的 div class 中，然后用脚本代码将其隐藏。

更新： 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;
        });

尽管 hide/appear 似乎有效，但如果我单击它，表单就会隐藏起来。这是一个问题，因为如果不能 type/click 在表格上，则没有人可以注册。（问题已解决）

这是codepen（现场版）：http://codepen.io/mariomez/pen/WbgrNK

Answer 1

您正在查找 ID 为 "signup" 的 div，但那是 class 名称。

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

将在页面加载时隐藏注册 div。

然后您可以在按钮单击事件上使用 $(".signup").toggle();。

如果将这些结合起来，例如

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

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

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

Answer 2

这里是 jQuery 以在页面加载时更改 CSS：

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

Answer 3

您隐藏 "signup" Div 但尝试恢复 "modal" div

这个有效：

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

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

Answer 4

您根本不需要注册 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

Answer 5

第一种方法(CSS) - CodePen

#signup {

     display: none;
}

第二种方法(jQuery) - CodePen

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

Answer 6

看起来您已经在代码笔粘贴中弄清楚了？该代码与您的 post...

不同

无论如何，您的登录对话框中有 3 层 div：
#signup > 模态背景 > 模态

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

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

那么您还需要在按钮事件中 show/hide #signup。

.modal-bg 和#modal 是#signup 的子元素，因此如果您保持#signup 处于隐藏状态，无论您对它们做什么，.modal-bg 和#modal 将始终隐藏。

顺便说一下，我建议你使用 FireBug 或通用开发工具（在 chrome/IE/FIrefox 中按 F12）来检查 HTML 元素并检查哪里出了问题，至少是这样我是如何在您的代码中发现问题的。

在页面加载时隐藏 div class

Hide div class on page load

javascript

jquery

html

css

hide