title: bootstrap modal inside slick slider
body: <p>I use bootstrap 3.</p>
  
  <p>And have a some code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><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');
          });
      });   
    
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
  
  
  
  .tab-content&gt;.tab-pane {
      display: block !important;   
      height: 0 !important;         
      overflow: hidden !important;
  }
  .tab-content &gt; .active {
      height: auto !important;    
  }
  
  
  
  
  .product-buy-click {
    display:block;
    padding: 40px 20px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
    
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" /&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"&gt;&lt;/script&gt;
  
  
    &lt;ul class="slider-filter nav nav-tabs"&gt;
      &lt;li class="active"&gt;
        &lt;a href="#popular-1" data-toggle="tab"&gt;
          1 tab
        &lt;/a&gt;
      &lt;/li&gt;      
      &lt;li&gt;
        &lt;a href="#popular-2" data-toggle="tab"&gt;
          2 tab
        &lt;/a&gt;
      &lt;/li&gt;   
    &lt;/ul&gt;
    
    
  &lt;div class="tab-content"&gt;
    &lt;div id="popular-1" class="tab-pane fade in active"&gt;  
      &lt;div class="slider-product"&gt;
  
        &lt;div class="item"&gt;
          &lt;a href="#" class="product-buy-click" data-target="#modalClick" data-toggle="modal"&gt;
            1/ open modal
          &lt;/a&gt;
  
          &lt;div class="order-modal modal fade" id="modalClick" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1"&gt;
            &lt;div class="modal-dialog" role="document"&gt;
              &lt;div class="modal-content"&gt;
                &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                  &lt;i class="fa fa-times" aria-hidden="true"&gt;&lt;/i&gt;
                &lt;/button&gt;    
                &lt;div class="modal-body"&gt;
                  1/ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus incidunt molestias quo nihil illum perspiciatis tempore! Sed necessitatibus a, eligendi.
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;        
        &lt;/div&gt;
  
        &lt;div class="item"&gt;
          &lt;a href="#" class="product-buy-click" data-target="#modalClick" data-toggle="modal"&gt;
            2/ open modal
          &lt;/a&gt;
  
          &lt;div class="order-modal modal fade" id="modalClick" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1"&gt;
            &lt;div class="modal-dialog" role="document"&gt;
              &lt;div class="modal-content"&gt;
                &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                  &lt;i class="fa fa-times" aria-hidden="true"&gt;&lt;/i&gt;
                &lt;/button&gt;    
                &lt;div class="modal-body"&gt;
                  2/ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus incidunt molestias quo nihil illum perspiciatis tempore! Sed necessitatibus a, eligendi.
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;        
        &lt;/div&gt;
  
        &lt;div class="item"&gt;
          &lt;a href="#" class="product-buy-click" data-target="#modalClick" data-toggle="modal"&gt;
            3/ open modal
          &lt;/a&gt;
  
          &lt;div class="order-modal modal fade" id="modalClick" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1"&gt;
            &lt;div class="modal-dialog" role="document"&gt;
              &lt;div class="modal-content"&gt;
                &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                  &lt;i class="fa fa-times" aria-hidden="true"&gt;&lt;/i&gt;
                &lt;/button&gt;    
                &lt;div class="modal-body"&gt;
                  3/ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus incidunt molestias quo nihil illum perspiciatis tempore! Sed necessitatibus a, eligendi.
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;        
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div id="popular-2" class="tab-pane fade"&gt;
      &lt;div class="slider-product"&gt;
  
        &lt;div class="item"&gt;
          &lt;a href="#" class="product-buy-click" data-target="#modalClick" data-toggle="modal"&gt;
            1/ open modal
          &lt;/a&gt;
  
          &lt;div class="order-modal modal fade" id="modalClick" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1"&gt;
            &lt;div class="modal-dialog" role="document"&gt;
              &lt;div class="modal-content"&gt;
                &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                  &lt;i class="fa fa-times" aria-hidden="true"&gt;&lt;/i&gt;
                &lt;/button&gt;    
                &lt;div class="modal-body"&gt;
                  1/ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus incidunt molestias quo nihil illum perspiciatis tempore! Sed necessitatibus a, eligendi.
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;        
        &lt;/div&gt;
  
        &lt;div class="item"&gt;
          &lt;a href="#" class="product-buy-click" data-target="#modalClick" data-toggle="modal"&gt;
            2/ open modal
          &lt;/a&gt;
  
          &lt;div class="order-modal modal fade" id="modalClick" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1"&gt;
            &lt;div class="modal-dialog" role="document"&gt;
              &lt;div class="modal-content"&gt;
                &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                  &lt;i class="fa fa-times" aria-hidden="true"&gt;&lt;/i&gt;
                &lt;/button&gt;    
                &lt;div class="modal-body"&gt;
                  2/ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus incidunt molestias quo nihil illum perspiciatis tempore! Sed necessitatibus a, eligendi.
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;        
        &lt;/div&gt;
  
        &lt;div class="item"&gt;
          &lt;a href="#" class="product-buy-click" data-target="#modalClick" data-toggle="modal"&gt;
            3/ open modal
          &lt;/a&gt;
  
          &lt;div class="order-modal modal fade" id="modalClick" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1"&gt;
            &lt;div class="modal-dialog" role="document"&gt;
              &lt;div class="modal-content"&gt;
                &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                  &lt;i class="fa fa-times" aria-hidden="true"&gt;&lt;/i&gt;
                &lt;/button&gt;    
                &lt;div class="modal-body"&gt;
                  3/ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus incidunt molestias quo nihil illum perspiciatis tempore! Sed necessitatibus a, eligendi.
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;        
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>bootstrap tabs inside of which is a slick slider.</p>
  
  <p>Each  <code>.slick-slide</code> slider there is a link to the call of the standard bootstrap modal window &amp; these modal windows are located immediately (just in <code>.slick-slide</code>).</p>
  
  <p>The <strong>problem</strong> is that the modal (although position: fixed) is positioned incorrectly and the modal mask overlaps the modal itself, closing does not work.</p>
  
  <p><strong>Question:</strong> 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 <code>.slick-slide</code>)?</p>