我想在幻灯片内容中添加模态淡入淡出(了解更多..) 当我在所有==>
中模态淡入数字1(“#portfolioModal(1)”)时 <button name="btn1" type="button" data-toggle="modal" data-target="#portfolioModal1">Read more</button></span>这就是我想要的工作。 但是当我将数字更改为每个 #portfolioModal(1-6) 时，它是正确的 除了第一个之外，它不起作用。 请帮助我:(
<div class="container1">
<div id="mySlides">
<div id="slide1">
<img src="images/slider1.jpg" alt="Slide 1 jFlow Plus"/>
<span><b class="slideheading">Quality Managment</b><br/>ISO 9001...<button name="btn1" type="button" data-toggle="modal" data-target="#portfolioModal1">Read more</button></span>
</div>
<div id="slide2">
<img src="images/slider2.jpg" alt="Slide 2 jFlow Plus"/>
<span><b class="slideheading">Environment Managment</b><br/>ISO 14000....<button name="btn2" type="button" data-toggle="modal" data-target="#portfolioModal2">Read more</button></span>
</div>
<div id="slide3">
<img src="images/slider3.jpg" alt="Slide 3 jFlow Plus"/>
<span><b class="slideheading">Health and Safety Management </b><br/>OHSAS-18000...<button name="btn3" type="button" data-toggle="modal" data-target="#portfolioModal3">Read more</button></span>
</div>
<div id="slide4">
<img src="images/slider4.jpg" alt="Slide 4 jFlow Plus"/>
<span><b class="slideheading">Food Safety-HACCP</b><br/>ISO 22000...<button name="btn4" type="button" data-toggle="modal" data-target="#portfolioModal4">Read more</button></span>
</div>
<div id="slide5">
<img src="images/slider5.jpg" alt="Slide 5 jFlow Plus"/>
<span><b class="slideheading">Energy Management </b><br/>50001...<button name="btn5" type="button" data-toggle="modal" data-target="#portfolioModal5">Read more</button></span>
</div>
<div id="slide6">
<img src="images/slider6.jpg" alt="Slide 6 jFlow Plus"/>
<span><b class="slideheading">Medical devices Quality Managment</b><br/>13485...<button name="btn6" type="button" data-toggle="modal" data-target="#portfolioModal6">Read more</button></span>
</div>
</div>
<div id="myController">
<span class="jFlowControl"></span>
<span class="jFlowControl"></span>
<span class="jFlowControl"></span>
<span class="jFlowControl"></span>
<span class="jFlowControl"></span>
<span class="jFlowControl"></span>
</div>
<section class="jFlowPrev">
<div></div>
</section>
<section class="jFlowNext">
<div></div>
</section>
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<img class="img-responsive" src="images/slider/OHS.jpg" alt="">
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-warning" data-dismiss="modal"><i class="fa fa-times"></i> Close </button>
</div>
<div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<img class="img-responsive" src="images/slider/OHS.jpg" alt="">
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-warning" data-dismiss="modal"><i class="fa fa-times"></i> Close </button>
</div>
</div>
<div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<img class="img-responsive" src="images/slider/OHS.jpg" alt="">
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-warning" data-dismiss="modal"><i class="fa fa-times"></i> Close </button>
</div>
</div>
<div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<img class="img-responsive" src="images/slider/OHS.jpg" alt="">
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-warning" data-dismiss="modal"><i class="fa fa-times"></i> Close </button>
</div>
</div>
<div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<img class="img-responsive" src="images/slider/OHS.jpg" alt="">
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-warning" data-dismiss="modal"><i class="fa fa-times"></i> Close </button>
</div>
</div>
<div class="portfolio-modal modal fade" id="portfolioModal6" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<img class="img-responsive" src="images/slider/OHS.jpg" alt="">
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-warning" data-dismiss="modal"><i class="fa fa-times"></i> Close </button>
</div>
</div>最佳答案
您忘记关闭一些 div，#portfolioModal2 不能是 #portfolioModal1 的子级。
https://jsfiddle.net/stby04/gyey79ar/
每个 .portfolio-modal 的 HTML 应该如下所示:
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<img class="img-responsive" src="images/slider/OHS.jpg" alt="">
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-warning" data-dismiss="modal"><i class="fa fa-times"></i> Close
</button>
</div>
</div>
关于javascript - (阅读更多链接)到模态淡入淡出 View ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29311545/