Задать вопрос
@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})
	});
  • Вопрос задан
  • 2587 просмотров
Комментировать
Подписаться 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 комментарий
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Прикрутить новую верстку
05 мая 2024, в 23:39
3000 руб./за проект
Нарисовать прототип сайта мультилендинга
05 мая 2024, в 23:36
3000 руб./за проект
Дописать 2D игру моделирование твердых тел
05 мая 2024, в 22:48
5000 руб./за проект
Ещё заказы