光滑滑块内的引导模态答案

【问题标题】：bootstrap modal inside slick slider光滑滑块内的引导模态
【发布时间】：2018-04-27 14:15:16
【问题描述】：

我使用引导程序 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 中）。

问题是modal（虽然position:fixed）定位不正确，modal mask与modal本身重叠，关闭不起作用。

问题：如果链接按钮和模态本身都位于光滑滑块内，我如何在单击链接时打开引导模态，以便它正确定位并正常工作（在每个.slick-slide 内）？

【问题讨论】：

对不起我的英语

标签： javascript jquery css twitter-bootstrap slick.js

【解决方案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>

【讨论】：

【解决方案2】：

您是否尝试过将引导模式置于滑块产品 div 之外？我之前遇到过引导模态的问题，原因是我将模态放置在标记中的位置。我真的不明白为什么必须将模态框放在滑块产品 div 中（除了可读性）。

【讨论】：