Mi código:

 <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> ....

//secuencia de comandos para el control deslizante de swiper

 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', } });

En el código anterior, tanto las pestañas como el control deslizante funcionan bien. El div modal existe en el código. Pero la ventana emergente modal no se muestra cuando hago clic en el enlace modal.

Intenté dar el valor de índice z más alto para la clase modal y también intenté dar un valor de índice z negativo a la clase de contenedor deslizante. todavia no funciona..

¿Puede alguien decirme dónde estoy haciendo mal? ¿Es posible que modal funcione con control deslizante?