我想在幻灯片显示内容中添加模态淡入淡出（阅读更多..） 当我在所有==＆gt;
中模态淡出数字1（＆＃34; #portfolioModal（1）＆＃34;）时
<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>
答案 0 :(得分：0)
你忘了关闭那里的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>