时间戳

首页 > 解决方案 > 单击链接上的模态淡入淡出不起作用

jquery - 单击链接上的模态淡入淡出不起作用

问题描述

我在点击和模态淡化时遇到了 Jquery 的问题。当我点击模态显示正确，但没有淡入淡出。我也尝试在模态中添加淡入淡出类，但没有任何反应。我在下面尝试了这段代码，但我不知道哪里出错了。谢谢


<html>
<body>
<a class="d-flex align-self-end float-right ico_doc" onclick="openModal();currentSlide(1)" id="tasto1" >link</a>
<div class="modal" tabindex="-1" id="myModal" style="background-color:rgba(33, 37, 41, .15) ">
<div class="modal-dialog modal-dialog-centered modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="closeModal()"> <span aria-hidden="true">&times;</span> </button>
</div>
<div class="modal-body">
<div class="mySlides" id="prod1">
<div class="numbertext">1 / 4</div>
<img src="https://picsum.photos/id/1000/600/300" style="width:100%" alt=""> </div>
<div class="mySlides" id="prod2">
<div class="numbertext">1 / 4</div>
<img src="https://picsum.photos/id/1050/600/300" style="width:100%" alt=""> </div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="https://picsum.photos/id/600/600/300" style="width:100%" alt=""> </div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="https://picsum.photos/id/87/600/300" style="width:100%" alt=""> </div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="https://picsum.photos/id/18/600/300" style="width:100%" alt=""> </div>

<!-- Next/previous controls --> 
<a class="prev" onclick="plusSlides(-1)">&#10094;</a> <a class="next" onclick="plusSlides(1)">&#10095;</a> 

<!-- Caption text -->
<div class="caption-container">
<p id="caption"></p>
</div>

<!-- Thumbnail image controls striscia di Foto piccole nel MODAL  -->
<div class="row prima_fascia" style="white-space: nowrap;">
<div class="col-md-3 m-0 p-0 d-inline-block text-center" > <img class="demo" src="https://picsum.photos/id/1000/600/300" onclick="currentSlide(1)" alt="Nature" style="width:80%"> </div>
<div class="col-lg-3  m-0 p-0 d-inline-block text-center"> <img class="demo" src="https://picsum.photos/id/1050/600/300" onclick="currentSlide(2)" alt="Snow" style="width:80%"> </div>
<div class="col-lg-3  m-0 p-0 d-inline-block text-center"> <img class="demo" src="https://picsum.photos/id/87/600/300" onclick="currentSlide(3)" alt="Mountains" style="width:80%"> </div>
<div class="col-lg-3  m-0 p-0 d-inline-block text-center"> <img class="demo" src="https://picsum.photos/id/18/600/300" onclick="currentSlide(4)" alt="Lights" style="width:80%"> </div>
</div>
<div class="row seconda_fascia " id="demo2">
<div class="col-lg-3  d-inline-block"  > <img class="demo2" src="https://picsum.photos/id/500/600/300" onclick="currentSlide(5)" alt="Nature" style="width:100%"> </div>
<div class="col-lg-3  d-inline-block"> <img class="demo2" src="https://picsum.photos/id/250/600/300" onclick="currentSlide(6)" alt="Snow" style="width:100%"> </div>
<div class="col-lg-3  d-inline-block"> <img class="demo2" src="https://picsum.photos/id/615/600/300" onclick="currentSlide(7)" alt="Mountains" style="width:100%"> </div>
<div class="col-lg-3  d-inline-block"> <img class="demo2" src="https://picsum.photos/id/49/600/300" onclick="currentSlide(8)" alt="Lights" style="width:100%"> </div>
</div>
<script>
     $(document).ready(function(e){
         $("#tasto1").on('click',function(){
             $("#myModal").fadeIn(1000)
         });
     });
</script>
</body>
</html>

标签： jquerytwitter-bootstrapbootstrap-4bootstrap-modal

解决方案

推荐阅读