2

Использую bootstrap 3.

Есть такой код jsbin:

$('.slider-product').each(function(){
  var $this = $(this);
  
  $this.slick({
    slidesToShow: 2,
    slidesToScroll: 1,               
    dots: false,
    infinite: true, 
  }); 
});


$(window).load(function(){
    $('.slider-product').each(function(){
        var $this = $(this);

        $this.on('setPosition', function () {
            $(this).find('.slick-slide').height('auto');
            var slickTrack = $(this).find('.slick-track');
            var slickTrackHeight = $(slickTrack).height();
            $(this).find('.slick-slide').css('height', slickTrackHeight + 'px');
        });
    });   
  
});
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');



.tab-content>.tab-pane {
    display: block !important;   
    height: 0 !important;         
    overflow: hidden !important;
}
.tab-content > .active {
    height: auto !important;    
} 
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

  
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>


  <ul class="slider-filter nav nav-tabs">
    <li class="active">
      <a href="#popular-1" data-toggle="tab">
        1 вкладка
      </a>
    </li>      
    <li>
      <a href="#popular-2" data-toggle="tab">
        2 вкладка
      </a>
    </li>   
  </ul>
  
  
<div class="tab-content">
  <div id="popular-1" class="tab-pane fade in active">  
    <div class="slider-product">

      <div class="item">
        <a href="#" class="product-buy-click" data-target="#modalClick" data-toggle="modal">
          1/ открыть модальное окно
        </a>

        <div class="order-modal modal fade" id="modalClick" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <i class="fa fa-times" aria-hidden="true"></i>
              </button>    
              <div class="modal-body">
                1/ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus incidunt molestias quo nihil illum perspiciatis tempore! Sed necessitatibus a, eligendi.
              </div>
            </div>
          </div>
        </div>        
      </div>

      <div class="item">
        <a href="#" class="product-buy-click" data-target="#modalClick" data-toggle="modal">
          2/ открыть модальное окно
        </a>

        <div class="order-modal modal fade" id="modalClick" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <i class="fa fa-times" aria-hidden="true"></i>
              </button>    
              <div class="modal-body">
                2/ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus incidunt molestias quo nihil illum perspiciatis tempore! Sed necessitatibus a, eligendi.
              </div>
            </div>
          </div>
        </div>        
      </div>

      <div class="item">
        <a href="#" class="product-buy-click" data-target="#modalClick" data-toggle="modal">
          3/ открыть модальное окно
        </a>

        <div class="order-modal modal fade" id="modalClick" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <i class="fa fa-times" aria-hidden="true"></i>
              </button>    
              <div class="modal-body">
                3/ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus incidunt molestias quo nihil illum perspiciatis tempore! Sed necessitatibus a, eligendi.
              </div>
            </div>
          </div>
        </div>        
      </div>
    </div>
  </div>

  <div id="popular-2" class="tab-pane fade">
    <div class="slider-product">

      <div class="item">
        <a href="#" class="product-buy-click" data-target="#modalClick" data-toggle="modal">
          1/ открыть модальное окно
        </a>

        <div class="order-modal modal fade" id="modalClick" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <i class="fa fa-times" aria-hidden="true"></i>
              </button>    
              <div class="modal-body">
                1/ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus incidunt molestias quo nihil illum perspiciatis tempore! Sed necessitatibus a, eligendi.
              </div>
            </div>
          </div>
        </div>        
      </div>

      <div class="item">
        <a href="#" class="product-buy-click" data-target="#modalClick" data-toggle="modal">
          2/ открыть модальное окно
        </a>

        <div class="order-modal modal fade" id="modalClick" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <i class="fa fa-times" aria-hidden="true"></i>
              </button>    
              <div class="modal-body">
                2/ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus incidunt molestias quo nihil illum perspiciatis tempore! Sed necessitatibus a, eligendi.
              </div>
            </div>
          </div>
        </div>        
      </div>

      <div class="item">
        <a href="#" class="product-buy-click" data-target="#modalClick" data-toggle="modal">
          3/ открыть модальное окно
        </a>

        <div class="order-modal modal fade" id="modalClick" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <i class="fa fa-times" aria-hidden="true"></i>
              </button>    
              <div class="modal-body">
                3/ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus incidunt molestias quo nihil illum perspiciatis tempore! Sed necessitatibus a, eligendi.
              </div>
            </div>
          </div>
        </div>        
      </div>
    </div>
  </div>
</div>

Есть Бутстраповские табы (вкладки), внутри которых расположен slick слайдер.

В каждом пункте слайдера .slick-slide есть кнпка\ссылка вызова стандартного бутстраповского модального окна + тут же расположены эти модальные окна (именно так и никак иначе, только внтри .slick-slide).

Проблема в том, что окно (хотя и position: fixed) позиционируется неправильно и маска окна перекрывает само окно, закрытие не работает).

Вопрос: Как, при клике на кнопку\ссылку, открыть bootstrap модальное окно, так чтобы оно правильно позиционировалось и работало без изъянов, если и кнопка\ссылка и само модальное окно располагается внутри пункта slick слайдера (внутри каждого .slick-slide)?

1
  • У меня такая же проблема нарисовалась!Как вы ее решили эту проблему?
    – PashaCart
    18 янв 2019 в 16:25

2 ответа 2

2

Тут проблема в том, что модалка с position:fixed находится внутри элемента с transform. В данном случае .slick-track. Наглядный пример со вроде бы независимым фиксированным окном с выравниванием по центру:

.modal{
  position: fixed;
  width: 200px;
  height: 200px;
  top: calc(50% - 100px);
  left: calc(50% - 100px);
  background: #cda;
}
.wrapper{
  transform: translateY(-100px);
}
<div class="wrapper">
  <div class="modal"></div>
</div>

Можно вывести разметку модальных окон за пределы слайдера при помощи js:

//перенос модальных окон в конец документа при инициализации слайдера
$('.slider-product').on('init', function(e, slick) {
  slick.$slides.find('.modal').appendTo('body');

  //из слайдов-клонов модалки долой. Для порядка
  $(this).find('.slick-cloned .modal').remove();
})

$('.slider-product').slick({
  slidesToShow: 2
});

//обновление слайдеров после открытии таба
$(document).on('shown.bs.tab', function() {
  $('.slick-slider').filter(':visible').slick('setPosition');
})
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>


<ul class="slider-filter nav nav-tabs">
  <li class="active">
    <a href="#popular-1" data-toggle="tab">
        1 вкладка
      </a>
  </li>
  <li>
    <a href="#popular-2" data-toggle="tab">
        2 вкладка
      </a>
  </li>
</ul>


<div class="tab-content">
  <div id="popular-1" class="tab-pane fade in active">
    <div class="slider-product">

      <div class="item">
        <a href="#" class="product-buy-click" data-target="#modalClick" data-toggle="modal">
          1/ открыть модальное окно
        </a>

        <div class="order-modal modal fade" id="modalClick" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <i class="fa fa-times" aria-hidden="true"></i>
              </button>
              <div class="modal-body">
                1/ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus incidunt molestias quo nihil illum perspiciatis tempore! Sed necessitatibus a, eligendi.
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="item">
        <a href="#" class="product-buy-click" data-target="#modalClick1" data-toggle="modal">
          2/ открыть модальное окно
        </a>

        <div class="order-modal modal fade" id="modalClick1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <i class="fa fa-times" aria-hidden="true"></i>
              </button>
              <div class="modal-body">
                2/ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus incidunt molestias quo nihil illum perspiciatis tempore! Sed necessitatibus a, eligendi.
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="item">
        <a href="#" class="product-buy-click" data-target="#modalClick2" data-toggle="modal">
          3/ открыть модальное окно
        </a>

        <div class="order-modal modal fade" id="modalClick2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <i class="fa fa-times" aria-hidden="true"></i>
              </button>
              <div class="modal-body">
                3/ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus incidunt molestias quo nihil illum perspiciatis tempore! Sed necessitatibus a, eligendi.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div id="popular-2" class="tab-pane fade">
    <div class="slider-product">

      <div class="item">
        <a href="#" class="product-buy-click" data-target="#modalClick3" data-toggle="modal">
          1/ открыть модальное окно
        </a>

        <div class="order-modal modal fade" id="modalClick3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <i class="fa fa-times" aria-hidden="true"></i>
              </button>
              <div class="modal-body">
                1/ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus incidunt molestias quo nihil illum perspiciatis tempore! Sed necessitatibus a, eligendi.
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="item">
        <a href="#" class="product-buy-click" data-target="#modalClick4" data-toggle="modal">
          2/ открыть модальное окно
        </a>

        <div class="order-modal modal fade" id="modalClick4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <i class="fa fa-times" aria-hidden="true"></i>
              </button>
              <div class="modal-body">
                2/ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus incidunt molestias quo nihil illum perspiciatis tempore! Sed necessitatibus a, eligendi.
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="item">
        <a href="#" class="product-buy-click" data-target="#modalClick5" data-toggle="modal">
          3/ открыть модальное окно
        </a>

        <div class="order-modal modal fade" id="modalClick5" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <i class="fa fa-times" aria-hidden="true"></i>
              </button>
              <div class="modal-body">
                3/ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus incidunt molestias quo nihil illum perspiciatis tempore! Sed necessitatibus a, eligendi.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

2
  • проблема в том, что модалка изначально с display: none в таких блоках (не только модалках) слик слайдер сложно активировать. Но спсасибо за попытку помочь!
    – SVE
    19 дек 2020 в 6:34
  • @HamSter , тут я таки могу с вами поспорить. Уберите все свойства transform (в т.ч. с префиксами) для .slick-track и модалка появляется как ни в чём не бывало поверх затемнения
    – zhurof
    19 дек 2020 в 6:53
0

У вас проблема с z-index-ами у модального окна он равен 1050, а у подложки 1040. но проблема в том что slick имеет posiion relative и не дает потомкам вылезти выше чем его слой, меняйте z-index slick слайдеру. Еще проблема в том что для перемещения slick слайдер transform и создает локальную систему координат, т.е. ваш fixed теперь отображается относительно slick-track. Вам скорее всего придется выносить модалку из слайдера

3
  • а Вы пробовали менять его прежде чем писать ответ?)
    – SVE
    27 апр 2018 в 9:34
  • если не пробовали, то я уже все перепробовала и z-index тут не при чем, но проблема да, однозначно, в слайдере. Все равно спасибо за ответ.
    – SVE
    27 апр 2018 в 9:35
  • @HamSter пардон, я думал ваша проблема в перекрытии подложкой, поправил ответ
    – slowBro
    27 апр 2018 в 12:06

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.