Форма регистрации JQuery onclick popup

Question

Я пытаюсь создать регистрационную форму JQuery JQuery при нажатии ссылки.

Так у меня есть эта кнопка:

<a href="#" class="cta">REGISTER NOW</a> 

И I`m пытается сделать всплывающим небольшую простой HTML регистрационной формы, что я могу хранить в скрытой регистрации DIV. Пример:

<div name="reg" style="visibility:hidden;">reg form</div> 

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

Могу ли я получить помощь в этом? Спасибо. Я пробовал с диалоговом окне jquery и почти все, что было найдено в Google, но, похоже, это не работает. Спасибо.

Answer 1

Как предложено Mihailo, вы можете использовать Bootstrap Modals, чтобы сделать его отзывчивым (мобильный, планшетный и ПК).

<a data-toggle="modal" data-target=".bs-example-modal-sm" role="button" class="">Launch demo modal</a> 

<div class="modal fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel">Registration</h4> 
     </div> 
     <div class="modal-body"> 
     <form name="reg-form"> 
      <div class="form-group"> 
      <label for="user-name" class="control-label">Full Name:</label> 
      <input type="text" class="form-control" id="user-name"> 
      </div> 
      <div class="form-group"> 
      <label for="email" class="control-label">Email Address:</label> 
      <input type="text" class="form-control" id="email"> 
      </div> 
     </form> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
    </div> 
</div> 

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

DIV класс = "модальный замирание бс-пример покадрово-см"

Если удалить замирание, то модальный не будет живой.

Более подробная информации о начальной загрузке модальностей является here

Кроме того, Вы могут найти соответствующий JsFiddle ниже: https://jsfiddle.net/Manoj85/7egtc2ne/5/

Надеется, что это помогает !!

Answer 2

Предполагая, что у вас есть DIV называемый регистр, который нужно добавить, это будет выглядеть следующим образом:

<script> 
    $(".cta").click(function() { 
     $("#register").css("hidden", false) 
    }) 
</script> 

Answer 3

Вы должны действительно использовать класс или идентификатор на вас зарегистрировать ДИВ вместо этого, но вы можете показать форма, как это:

$('.cta').click(function() { 
    $('div[name="reg"]').css('visibility', 'visible'); 
}) 

После того, как вы даете Див надлежащий класс/идентификатор, вы можете заменить div[name="reg"] с .class или #id. Кроме того, jQuery имеет несколько встроенных функций для скрытия и отображения элементов. Чтобы использовать их, вы захотите изменить visibility:hidden; на display:none;. Затем, в коде я представил выше, заменить .css(...) с одним из следующих способов:

• .show() является немедленным эффектом, а так же, как изменение свойства дисплея block. Чтобы снова удалить, используйте .hide().
• .fadeIn(), как следует из названия, является скорее постепенным эффектом затухания. Противоположно .fadeOut().
• slideDown() похож на «гармонический» эффект, когда элемент начинается с высоты 0 и «растет». Противоположно .slideUp().

Вы также можете использовать .toggle(), .fadeToggle() или slideToggle() соответственно чередовать между отображением и скрытием элементов.

Я создал this JSFiddle, чтобы продемонстрировать эти эффекты.