Hello I have a sign up form which is visible and I am trying to hide it when the page loads. So what I did was to put the whole form in a div class named "signup" and then hide it with a script code.

UPDATE: 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>

My JS code (without hide function):

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

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

Even though the hide/appear seems to work the form goes hidden if I click on it. This is a problem as no one can sign up if they can't type/click on the form. (ISSUE FIXED)

here is the codepen (live version):

Hello I have a sign up form which is visible and I am trying to hide it when the page loads. So what I did was to put the whole form in a div class named "signup" and then hide it with a script code.

UPDATE: 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>

My JS code (without hide function):

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

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

Even though the hide/appear seems to work the form goes hidden if I click on it. This is a problem as no one can sign up if they can't type/click on the form. (ISSUE FIXED)

here is the codepen (live version): http://codepen.io/mariomez/pen/WbgrNK

• javascript
• jquery
• html
• css
• hide

• 2 If you wanted to do this on load, why not do it with CSS? .signup { display: none; } – lshettyl Commented Mar 6, 2015 at 14:17
• @LShetty, one reason not to do that is if you had js disabled, the form would never be displayed – Pete Commented Mar 6, 2015 at 14:20
• Js is enabled as if I remove the any hide code then the form appears on page load and it does close if I click on the close button – Ricky Commented Mar 6, 2015 at 14:21
• .signup { display: none; } - I did that already before asking here it doesn't work either. – Ricky Commented Mar 6, 2015 at 14:22
• now it's at the end of the body but I've tried on "head" too. nothing seems to work. My form keeps being visible on page load. – Ricky Commented Mar 6, 2015 at 14:33

6 Answers 6

You don't need the signup div at all - I think it plicates things. Just start your modal background hidden so before your button click code add this:

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

Example

Update

to stop your form showing up whilst your page loads I would add a js div:

after your body opening tag:

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

before your body closing tag:

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

This allows you to apply js only style, in this case for the modal-bg:

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

and then you can remove the above js to hide the modal as it will be now in your css

updated codepen

You hide the "signup" Div but try to restore the "modal" div

This works:

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

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

You are looking for a div with the id "signup", but that is the class name.

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

Will hide the signup div when the page loads.

You could then use $(".signup").toggle(); on the button click event.

If you bine these, e.g.

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

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

Then the button displays the signup block correctly, and it is hidden on page load.

Here is the jQuery to change the CSS on page load:

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

First method (CSS) - CodePen

#signup {

     display: none;
}

Second method (jQuery) - CodePen

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

Looks like you already figured it out in your codepen paste? That code is different from your post...

Anyway, you have 3 layers of divs in your Login dialog:
#signup > modal-bg > modal

So if you want to hide #signup after loading the page:

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

then you also need to show/hide #signup in your button events.

.modal-bg and #modal are child elements of #signup, so if you remain #signup in hidden, .modal-bg and #modal will always be hidden no matter what you do on them.

By the way, I suggest you to use FireBug or general developer tools (hit F12 in chrome/IE/FIrefox) to inspect HTML elements and check what goes wrong, at least that's how I found the problem in your code.