всплывающая форма jQuery

236

20 августа 2018, 16:20

Есть форма с display:none
      <form id="form">
             <input type="name" name="name" placeholder="Ваше имя"><br>
             <input type="number" name="phone" placeholder="+79999999"><br>
             <button type="submit">Отправить</button>
        </form>
надо сделать так чтобы при клике по кнопке с классом .form-popup
форма появлялась, делал так
 $(".form-popup").click(function() {
 $("#form").show();
});
не получилось...

Answer 1

Да вроде нормально всё

$(".form-popup").click(function() { 
  $("#form").show(); 
});

#form{ 
  display:none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form id="form"> 
  <input type="name" name="name" placeholder="Ваше имя"><br> 
  <input type="number" name="phone" placeholder="+79999999"><br> 
  <button type="submit">Отправить</button> 
</form> 
<button class="form-popup">Показать</button>

Answer 2

Баг в jQuery, когда стиль задан для form:

$(".form-popup").click(function() { 
  $("#form").show(); 
});

form { 
  display: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<button class="form-popup">Click</button> 
<form id="form"> 
  <input type="name" name="name" placeholder="Ваше имя"><br> 
  <input type="number" name="phone" placeholder="+79999999"><br> 
  <button type="submit">Отправить</button> 
</form>

При этом, так работает:

$("#form").css("display", "block");

и так работает - с инлайн стилем:

<form id="form" style="display: none;">
...
$("#form").show();

Нет бага в 3.1.1:

$(".form-popup").click(function() { 
  $("#form").show(); 
});

form { 
  display: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<button class="form-popup">Click</button> 
<form id="form"> 
  <input type="name" name="name" placeholder="Ваше имя"><br> 
  <input type="number" name="phone" placeholder="+79999999"><br> 
  <button type="submit">Отправить</button> 
</form>

Создание интернет-магазина кофе и чая в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как получить все переменные функции из другого модуля и проверить, что они обрабатываются с помощью некоторой функции [Javascript / Dojo]

У меня есть модуль, который имеет следующую функцию:

209

javascript

Проблема с рендерингом списков в React

Пытаюсь вытащить из API сервиса данные и вставить их в компонент

275

javascript

Помощь в поиске плагина для webpack3

Нужна помощь в поиске плагина для webpack 3 который будет "пробегать" по указанной в опциях директории, содержащий svg-файлы и компилить файл формата...

272

javascript

JavaScript - не меняются стили css

CSS:

237