如何在滑动器滑动条内添加模态?

Question

我的代码:

<div class="tab-pane fade in active" id="home">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="www.example.com" data-toggle="modal" data-target="#123" onclick="window.open(this.href, '_blank');">
<span class="coupon-code-value">123</span>
</a>
</div>
</div>
....
</div>
<div class="dhs-controls">
<div class="dhs dhs-prev"></div>
<div class="dhs dhs-next"></div>
</div>
</div>

<!-- Modal -->
<div id="123" class="modal fade">
<div class="modal-dialog" role="document">
<div class="modal-content">
...
</div>
</div>
</div>
....

//script for slider

var swiper = new Swiper(".swiper-container", {
preloadImages: false,
freeMode: false,
slidesPerView: 1,
spaceBetween: 10,
loop: false,
grabCursor: true,
mousewheel: false,
observer: true,
observeParents: true,
navigation: {
nextEl: '.dhs-next',
prevEl: '.dhs-prev',
}
});

在上面的代码中，选项卡和滑动条都工作正常。模态div存在于代码中。但是当我点击模态链接时，模态弹出窗口没有显示。

我试过给模态类最高的z-指标值，也试过给负z-指标值的冲刷容器类。还是不行

谁能告诉我哪里做错了?模态是否可能与滑动条一起工作?

Answer 1

Swiper.js有一个名为.modal的内置类。这里是默认属性display: none。

只要在你的。css中把display改成block来显示模态，然后你就可以用一个事件监听器来切换模态的显示