загрузочный модал внутри скользящего слайдера

Question

Я использую Bootstrap 3.

И есть код:

$('.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;    
}




.product-buy-click {
  display:block;
  padding: 40px 20px;
}

<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 tab
      </a>
    </li>      
    <li>
      <a href="#popular-2" data-toggle="tab">
        2 tab
      </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/ open modal
        </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/ open modal
        </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/ open modal
        </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/ open modal
        </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/ open modal
        </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/ open modal
        </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-slide есть ссылка на вызов стандартного модального окна начальной загрузки, и эти модальные окна находятся сразу (только в .slick-slide).

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

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

Answer 1

Вы пробовали размещать модальности начальной загрузки вне div-файла продукта-слайдера? У меня раньше были проблемы с модальностями начальной загрузки, вызванные тем, где я разместил модал в разметке. Я действительно не понимаю, почему модалы должны быть помещены в div продукта слайдера (за исключением читабельности).

Answer 2

Не знаю, понял ли я, но надеюсь

$('.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');
					});
				});  

				$("body").on("click",".product-buy-click",function(e){
					e.preventDefault();
					var id = $(this).data("id");
					var name = $(this).data("name");
					var text = $(this).data("text");
					$("#modalClick")
						.find(".modal-title").empty().append(name).end()
						.find(".modal-body").empty().append(text+id).end()					
						.modal("show");
				}) 
			
			});

.tab-content>.tab-pane {
  display: block !important;   
  height: 0 !important;         
  overflow: hidden !important;
}
.tab-content > .active {
  height: auto !important;    
}
.product-buy-click {
  display:block;
  padding: 40px 20px;
}	

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" />
<ul class="slider-filter nav nav-tabs">
			<li class="active">
				<a href="#popular-1" data-toggle="tab">
					1 tab
				</a>
			</li>      
			<li>
				<a href="#popular-2" data-toggle="tab">
					2 tab
				</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-id="1" data-text="this product:" data-name="product 1">
							1/ product 1
						</a>       
					</div>
					<div class="item">
						<a href="#" class="product-buy-click" data-id="2" data-text="this product:" data-name="product 2">
							2/ product 2
						</a>       
					</div>

					<div class="item">
						<a href="#" class="product-buy-click" data-id="3" data-text="this product:" data-name="product 3">
							3/ product 3
						</a>       
					</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-id="4" data-text="this product:" data-name="product 4">
							4/ product 4
						</a>       
					</div>
					<div class="item">
						<a href="#" class="product-buy-click" data-id="5" data-text="this product:" data-name="product 5">
							5/ product 5
						</a>       
					</div>

					<div class="item">
						<a href="#" class="product-buy-click" data-id="6" data-text="this product:" data-name="product 6">
							6/ product 6
						</a>       
					</div>

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

		<div class="modal fade" id="modalClick" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel">Modal title</h4>
					</div>
					<div class="modal-body">
						algo
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
						<button type="button" class="btn btn-primary">Save changes</button>
					</div>
				</div>
			</div>
		</div>
    <script src="https://code.jquery.com/jquery.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>