我想在幻灯片内容中添加模式淡入淡出（阅读更多..）
当我在所有==>中但出现模态淡入淡出数字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/