Как выставить приоритет модальному окну?

Question

[Anonimmus]

dev-shop.stebnev.ru/o-kompanii
при нажатии на кнопку вызова модального окна, немогу найти ошибку . темный wrapper становится поверх страницы, модалка остается сзади.. Раньше работало, сейчас непонимаю что сломал.. Я учусь я новичек пж хелп

Comments

[Виталий Першин]

У вас фон модалки внутри body, а сама модалка глубоко в разметке зарыта, она никак не сможет выбраться за пределы своих родителей, разве что всем им прописать postion: static, но скорее всего это приведет еще к большим проблемам, нужно менять подход. Поместите модалку рядом с фоном модалки..

Answer 1

[Anonimmus]

<div class="container">
			<div class="row">
				<!--изображение слева-->
				<div class="col-lg-5 col-12 order-2 order-sm-2 order-lg-1 ">
					<div class="position-abbout-img wow fadeInUp" data-wow-duration="1.5s" data-wow-offset="200">
						<img src="<?php the_field('izobrazhenie');?>"  class="abbout-img">
					</div>
				</div>
				<!--//изображение слева-->
				<div class="col-lg-6 col-12 order-1 order-sm-1 order-lg-2 ">    
					<!--инфо справа-->
					<div class="padding-main-top wow fadeInUp" data-wow-duration="1.5s" data-wow-offset="200">
						<h2 class="main-caption-section abbout-us-caption">О компании</h2>
						<?php the_field('tekst_o_kompanii');?>
					</div>
					<!--//инфо справа-->
				</div>
			</div>
		</div>
		<div class="position-abbout"></div>
	</section>

	<section class="reviews reviews-back wow fadeInUp" data-wow-duration="1.5s" data-wow-offset="200">
		<div class="container">
			<h2 class="caption">Отзывы</h2>
			<div class="slider-abbout">
				<!-- Swiper -->
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<?php

// проверяем есть ли в повторителе данные
						if( have_rows('otzyvy_o_kompanii') ):
// перебираем данные
							while ( have_rows('otzyvy_o_kompanii') ) : the_row();
// отображаем вложенные поля ?>

<div class="swiper-slide wow fadeInUp" data-wow-duration="1.5s" data-wow-offset="200">
	<div class="reviews-slide "> 
		<img src="<?php the_sub_field('izobrazhenie');?>" alt="">
		<h3 class="caption-slider-abbout"><?php the_sub_field('imya_i_familiya');?></h3>
		<p class="text-revies-slide"><?php the_sub_field('otzyv');?></p>
	</div>
</div>

<?php endwhile;
else :
// вложенных полей не найдено
endif;
?>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>

<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<!-- Initialize Swiper -->
</div>

</div>

<div  id="wrapper" class="leave-revies">
	<img src="<?= bloginfo('template_directory'); ?>/template/img/left-leaves-back.png" alt="image" class="left-leaves-img">
	<button type="button" class="leave-revies-btn" data-toggle="modal" data-target="#exampleModalCenter">Оставить отзыв</button>
	<img src="<?= bloginfo('template_directory'); ?>/template/img/right-leaves-back.png" alt="image" class="right-leaves-img">
</div>

<!-- Modal -->
<div class="modal" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true" style="padding: 0!important;">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content">
			<div class="modal-header">

				<h5 class="modal-title" id="exampleModalLongTitle">Оставить отзыв</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true"><img src="<?= bloginfo('template_directory'); ?>/template/img/close.svg" alt=""></span>
				</button>
			</div>
			<div class="modal-body">

				<?php echo do_shortcode( '[contact-form-7 id="196" title="Оставить отзыв"]' ); ?>

				

			</div>
		</div>
	</div>
</div>
 

</div> 
</section>
</main>

а вот css думаю можно и в инспекторе глянуть

Comments

[Anonimmus]

Решение подсказал куратор темы Виталий
модалку поднял до уровня Body все сработало!!! Благодарю

Answer 2

[Lukmann]

z-index ом попробуй поработать,в таких случаях нужно кидать ссылку на верстку чтоб люди понимали как тебе помочь