bootstrap 光滑滑块内的模态

Question

我用bootstrap3.

并有一些代码：

$('.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 个选项卡，里面有一个光滑的滑块。

每个 .slick-slide 滑块都有一个 link 调用标准 bootstrap 模态 window & 这些模态 windows 立即定位（只是在 .slick-slide).

问题是模态框（虽然position: fixed）定位不正确，模态遮罩与模态框本身重叠，关闭不起作用

问题： 如何在单击 link 时打开 bootstrap 模态，使其正确定位并正常工作，如果两者link 按钮和模态框本身位于光滑的滑块内（在每个 .slick-slide 内）?

Answer 1

不知道我看懂没有，希望

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

您是否尝试过将 bootstrap 模式放在 slider-product div 之外？由于我在标记中放置模态的位置，我之前遇到过 bootstrap 模态的问题。我真的不明白为什么模态必须放在 slider-product div 内（除了可读性）。

bootstrap 光滑滑块内的模态

bootstrap modal inside slick slider

javascript

css

jquery

twitter-bootstrap

slick.js