Скрыть класс div на странице load

Question

Здравствуйте, у меня есть форма регистрации, которая видна, и я пытаюсь скрыть ее, когда страница загружается. Так что я сделал, чтобы поместить всю форму в класс div с именем «signup», а затем скрыть его кодом скрипта.

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> 

Мой JS код (без функции скрытия):

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

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

Даже если шкура/появляются, кажется, работает форма идет скрытый, если я нажимаю на него. Это проблема, поскольку никто не может зарегистрироваться, если они не могут набирать/нажимать на форму. (ВЫПУСК FIXED)

вот codepen (концертная версия): http://codepen.io/mariomez/pen/WbgrNK

Answer 1

Вам вообще не нужен дилер регистрации - я думаю, что это усложняет ситуацию.Просто начните модальный фон спрятан так, прежде чем ваш код кнопки нажмите добавить:

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

Example

Update

, чтобы остановить вашу форму, показывая вверх во время вашей загрузки страницы я бы добавил JS ДИВ :

после вашего тела открытия тега:

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

до вашего тела закрывающего тега:

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

Это позволяет применять JS только стиль, в этом случае для модального-BG:

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

, а затем вы можете удалить вышеуказанные JS в скрыть модальность, как это будет теперь в вашем CSS

updated codepen

Answer 2

Вы ищете DIV с идентификатором «Зарегистрироваться», но это имя класса.

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

Спрячет регистрацию div при загрузке страницы.

Затем вы можете использовать $(".signup").toggle(); на событии нажатия кнопки.

Если вы их объединяете, например,

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

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

Затем кнопка отображает блок регистрации правильно и скрыта при загрузке страницы.

Answer 3

Вот JQuery изменить CSS на странице загрузки:

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

Answer 4

Вы скрываете «регистрацию» Див, но попытаться восстановить «модальный» ДИВ

Это работает:

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

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

Answer 5

Первый способ (CSS) - CodePen

#signup { 

    display: none; 
} 

Второй метод (JQuery) - CodePen

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

Answer 6

Похоже, вы уже поняли это в ваших codepen вставить? Этот код отличается от вашего поста ...

Во всяком случае, у вас есть 3 слоя дивы в вашем диалоге Вход:
#signup> модальный-BG> модальный

Так что, если вы хотите скрыть #signup после Загрузите страницу:

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

тогда вам также необходимо показать/скрыть #signup в ваших событиях кнопок.

.modal-bg и #modal являются дочерними элементами #signup, поэтому, если вы остаетесь #signup в скрытом, .modal-bg и #modal всегда будут скрыты независимо от того, что вы делаете на них.

Кстати, я предлагаю вам использовать FireBug или общие инструменты для разработчиков (нажмите F12 в chrome/IE/FIrefox), чтобы проверить элементы HTML и проверить, что пошло не так, по крайней мере, так я нашел проблему в вашем коде.