How to prioritize a modal window?

Question

css

dev-shop.stebnev.ru/o-kompanii
when I click on the button to call the modal window, I can't find an error. the dark wrapper becomes on top of the page, the modal stays behind.. It used to work, now I don’t understand what I broke.

Answer 1

<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>

but css I think you can look in the inspector

Answer 2

z-index oh try to work, in such cases you need to throw a link to the layout so that people understand how to help you