Модальное окно по клику на button

284
24 ноября 2017, 06:09

Есть кнопка отправки формы button. По клику на нее в конце должно появляться модальное окно. Вместо этого, окно появляется, сразу идет перезагрузка страницы и окно исчезает. я так понимаю, это именно из-за того, что это button. Какой выход может быть?

проблема именно когда button находится в теге form. Причем не важно, где наше модальное окно, в форме или нет. Все равно окно открывается и сразу закрывается

$("#sub_toggle").click(function() {
    $('#sub_modal').show();
});
<div id="sub_modal"></div>
<button id="sub_toggle"></button>
Answer 1

Можно сделать так:

$("#sub_toggle").click(function() { 
  $('#sub_modal').slideToggle(); 
});
#sub_modal { 
  display: none; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
 
<div id="sub_modal">модалка</div> 
<button id="sub_toggle">кнопка</button>

Но:

Страница перезагружается из-за того, что форма отправляться. Если форма на ajax то делать проверку отправки формы через jquery ajax success, а если нет, то можете отправить параметр в url через php типо index.php?response="openmodal" а потом делать проверку типа if $_GET['respons'] == 'openmodal'

Answer 2

У тега <button> есть атрибут type

По умолчанию он установлен как type="submit"

Чтобы форма не отправлялась достаточно установить type="button", что даст понять броузеру, что это кнопка-заглушка - подробности о теге <button>

READ ALSO
Проблема с animation css

Проблема с animation css

Здравствуйте! Сделал анимации, работают, но после окончания анимации, элемент возвращается на стартовую позицию ( 0% )Вопрос: как сделать так,...

234
Автозаполняемое поле в форме

Автозаполняемое поле в форме

Мне нужно сделать поле, которое динамически предлагает возможные варианты при вводеНашел flexdatalist, и все бы ничего, только не могу предварительно...

335
Bash. Заменить inline картинки в html на внешние файлы

Bash. Заменить inline картинки в html на внешние файлы

Есть файл с htmlНа самом деле это вообще дамп базы mysql

238