Задать вопрос
@mrDach
html

Bootstrap проблема с модальным окном?

Хочу сделать кнопку по нажатию которой будет появляться модальное окно. В документации Bootstrap есть даже готовые примеры, вроде бы все просто и понятно, но что то не работает. почему то оверлей всегда идет поверх модального окна. да и модальное окно не закрывается по клику на оверлей. смотрел z-index каждого элемента вроде все правильно, у модального окна 1040 у оверлея 1030. что делаю не так?
страничка

<a href="#" class="btn" id="openBtn">Open modal</a>

<div id="myModal" style="opacity: 0.99;" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal">×</button>
		<h3>Dialog</h3>
	</div>
	<div class="modal-body">
      <iframe src="http://staging.lifecoachspotter.com/start-here/" style="zoom:1" width="800" height="650" frameborder="0"></iframe>
	</div>
	<div class="modal-footer">
		<button class="btn" data-dismiss="modal">OK</button>
	</div>
</div>

$('#openBtn').click(function(e){
		e.preventDefault();
	    $('#myModal').modal({show:true})
	});
  • Вопрос задан
  • 2604 просмотра
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 2
@IvanKalinin
Макс Музафаров Плохое решение с important.

Для начала следует понимать z-index.
А именно самое главное - он работает для блоков на одном уровне (по глубине), с т.н. сиблингами.
Самое первое - неправильная структура html кода. Нужно вынести весь div id="myModal" на тот же уровень, что и оверлей, т.е. после тега <body> или перед </body>, т.к. оверлей блок появляется именно там. На структуру сайта в целом это не повлияет, т.к. оба имеют position: fixed. А вот "магию" увидите, лишь правильно расположив блоки.
Ответ написан
1 комментарий
1 комментарий
@shure348
код модалки должен быть не где-то внутри блоков а внизу сайта перед
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ответы на вопрос 1
M_Muzafarov
@M_Muzafarov
убери .wt_section { z-index: 10;}

или добавь .modal {z-index:1040 !important;}
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
CRM Bitrix24 разработчик
World Vision Clinic • Москва
от 170 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработать бота для отслеживания неудачных тон транзакций
23 дек. 2024, в 09:55
10000 руб./за проект
Верстка сайта в Tilda
23 дек. 2024, в 09:41
5000 руб./за проект
UI мобильной игры
23 дек. 2024, в 09:39
1000000 руб./за проект
Ещё заказы