bootstrap modal inside slick slider

Question

I use bootstrap 3.

And have a some code:

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

bootstrap tabs inside of which is a slick slider.

Each .slick-slide slider there is a link to the call of the standard bootstrap modal window & these modal windows are located immediately (just in .slick-slide).

The problem is that the modal (although position: fixed) is positioned incorrectly and the modal mask overlaps the modal itself, closing does not work.

Question: How do I open the bootstrap modal when clicking the link, so that it is correctly positioned and worked without flaws, if both the link button and the modal itself are located inside the slick slider (inside each .slick-slide)?

Answer 1

I do not know if I understood, but I hope

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

Answer 2

Have you tried placing the bootstrap modals outside of the slider-product div? I have experienced problems with bootstrap modals before caused by where I placed the modal in markup. I don't really see why the modals have to be placed inside the slider-product div (except for readability).