Почему не закрывается модальное окно по клику на ссылку в нем?

Question

[Алексей Скляров]

Имеется простая функция

$(document).ready(function(){
  $('#menu-item-18 > a').click(function(){
    $('#mobile-menu-full').modal('hide');
  }); 
});

Идея такая: имеется модальное окно, которое работает как блок меню (на телефоне). При нажатии на ссылку в этом модальном окне, оно должно закрываться. Но оно не закрывается. В чем может быть проблема?

Comments

[Hyubert]

Что за метод .modal ? Я такого не знаю. Фреймворк?

[Hyubert]

Вам нужно заменить .modal на .addClass('hide');

[Алексей Скляров]

Hyubert: да, в теге указан Bootstrap

Answer 1

[iBird Rose]

все должно работать. мб ошибся где то в классах или id
https://jsfiddle.net/qq6sgfvr/

p.s. а вообще у бутсрапа есть атрибут для закрытия модалки data-dismiss="modal"
добавь его в ссылку и js код писать не придется

Answer 2

[Hyubert]

ну если это Bootstrap, то добавте в HTML для модального окна в .modal-header

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

И как сказал оратор више

js код писать не придется

Answer 3

[Артем Можаров]

$(document).ready(function(){
  $('#menu-item-18 > a').click(function(e){
    e.preventDefault() // уберет стандартное событие на ссылку
    $('#mobile-menu-full').modal('hide');
  }); 
});

Answer 4

[Hunter_Code]

В моем случае помогло изменить атрибуты data-toggle на data-bs-toggle , data-target на data-bs-target, data-dismiss на data-bs-dismiss

<!-- кнопка вызова -->
<button type="button" class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#exampleModal" data-whatever="@risk" >кнопка</button>

<!-- форма обратной связи -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		  <div class="modal-content">
	<div class="modal-header">
				  <h5 class="modal-title" id="exampleModalLabel">New message</h5>
				  <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				  </button>
				</div>
				<div class="modal-body">
				  <form>
					<div class="mb-3">
					  <label for="recipient-name" class="col-form-label">Recipient:</label>
					  <input type="text" class="form-control" id="recipient-name">
					</div>
					<div class="mb-3">
					  <label for="message-text" class="col-form-label">Message:</label>
					  <textarea class="form-control" id="message-text"></textarea>
					</div>
				  </form>
				</div>
				<div class="modal-footer">
				  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
				  <button type="button" class="btn btn-primary">Send message</button>
				</div>
			  </div>
			</div>
		  </div>
		  <!-- форма обратной связи -->