javascript - (阅读更多链接)到模态淡入淡出 View-6ren

javascript - (阅读更多链接)到模态淡入淡出 View

转载作者：行者123 更新时间：2023-11-28 07:29:01

我想在幻灯片内容中添加模态淡入淡出(了解更多..)当我在所有==>

中模态淡入数字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/

文章推荐： css - 居中渐变省略号 css 阴影

文章推荐： ios - 如何将完成 block 添加到 .childAdded firebase 查询？

文章推荐： html - css: div height 灵活地到达屏幕底部有一些边距

文章推荐： javascript - 在 AngularJS 中加载部分 html 文件

angularjs - 什么是 Angular 态？
我来自 Asp.Net 世界，试图理解 Angular State 的含义。什么是 Angular 状态？它类似于Asp.Net中的ascx组件吗？是子页面吗？它类似于工作流程状态吗？我听到很多人
javascript - 3 态 CSS 拨动开关
我一直在寻找 3 态拨动开关，但运气不佳。基本上我需要一个具有以下状态的开关: |开 |不适用 |关 | slider 默认从中间开始，一旦用户向左或向右滑动，就无法回到N/A(未回答)状态。有人

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - (阅读更多链接)到模态淡入淡出 View