Bootstrap 模态框和轮播分开使用的教程网上非常多。可是两者结合使用的样例和资料非常少。

两者结合使用时，開始我遇到了不少bug，如今分享给大家。

我的这个样例是把图片轮播嵌入到模态框里。

最后的效果例如以下图：点击页面上button，弹出模态框，模态框里的图片開始轮播，点击旁边空白位置。模态框消失。

代码例如以下：

<!DOCTYPE html>

<html>

<head>

   <title>Bootstrap 实例 轮播、模态框</title>

   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">

   <script src="/scripts/jquery.min.js"></script>

   <script src="/bootstrap/js/bootstrap.min.js"></script>

   <script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-modal.js"></script>

</head>

<body>

<style type="text/css">

 .carousel {

position:absolute;

   left:150px;

   top:100px;

   width: 100%;

}

</style>

<div class="container">

   <h2>模态框+轮播</h2>

   <div id="example" class="modal fade">

      <div class="modal-dialog">

         <div class="modal-content">

            <!-- 模态框 -->

            <div id="myCarousel" class="carousel slide">

               <!-- 轮播（Carousel）指标 -->

               <ol class="carousel-indicators">

                  <li data-target="#myCarousel" data-slide-to="0" class="active"></li>

                  <li data-target="#myCarousel" data-slide-to="1"></li>

                  <li data-target="#myCarousel" data-slide-to="2"></li>

               </ol>

               <!-- 轮播（Carousel）项目 -->

               <div class="carousel-inner" >

                  <div class="item active">

                     <img src="../../../web/images/testcar1.jpg" alt="正面照">

                     <div class="carousel-caption">正面照</div>

                  </div>

                  <div class="item">

                     <img src="../../../web/images/testcar2.jpg" alt="中控照">

                     <div class="carousel-caption">中控照</div>

                  </div>

                  <div class="item">

                     <img src="../../../web/images/testcar3.jpg" alt="后面照">

                     <div class="carousel-caption">后面照</div>

                  </div>

               </div>

               <!-- 轮播（Carousel）导航 -->

               <a class="carousel-control left" href="#myCarousel"

               data-slide="prev">‹</a>

               <a class="carousel-control right" href="#myCarousel"

               data-slide="next">›</a>

            </div>

         </div>

      </div>

   </div>

   <p><a data-toggle="modal" href="#example" class="btn btn-primary btn-large">Launch demo</a></p>

</div>

</body>

</html>

Bootstrap 模态框、轮播 结合使用的更多相关文章

  1. js控制Bootstrap 模态框（Modal）插件

    js控制Bootstrap 模态框(Modal)插件 http://www.cnblogs.com/zzjeny/p/5564400.html

  2. Bootstrap模态框按钮

    1.触发模态框弹窗的代码 这里复制了一段Bootstrap模态框的代码 <h2>创建模态框(Modal)</h2> <!-- 按钮触发模态框 --> <but ...

  3. 解决bootstrap模态框内输入框无法获取焦点

    bootstrap 模态框中的input标签在某些情况下会无法获取焦点. 最终解决方法:去除模态框的 tabindex="-1" 属性即可

  4. 2.bootstrap练习笔记-轮播图

    bootstrap练习笔记-轮播图 1.要使用轮播图,首先要将其放在一个主div里面 设置id为myCaroysel class为carousel slide 设置id是标识这个div是轮播图,等到l ...

  5. Bootstrap 模态框（Modal）插件

    原文链接:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html Bootstrap 模态框(Modal)插件 模态框(Modal)是覆 ...

  6. Bootstrap 模态框在用户点击背景空白处时会自动关闭

    问题: Bootstrap 模态框在用户点击背景空白处时,会自动关闭. 解决方法: 在HTML页面中编写模态框时,在div初始化时添加属性 aria-hidden=”true” data-backdr ...

  7. Bootstrap模态框（MVC）

    BZ这篇博客主要是为大家介绍一下MVC如何弹出模态框.本文如果有什么不对的地方,希望大神们多多指教,也希望和我一样的小菜多多学习.BZ在这里谢过各位. 首先要在页面加上一个点击事件: @Html.Ac ...

  8. 去除bootstrap模态框半透明阴影

    当使用bootstrap模态框默认自带半透明阴影,如果想要去除阴影,需要怎么做呢? 今天在项目中我遇到了这个问题,想要去除模态框的阴影,试了好久都没解决.后来问同事的时候才知道,当模态框弹出后,会加上 ...

  9. 利用bootstrap写图片轮播

    利用bootstrap写图片轮播 缺点是轮播没有固定样式图片样式会改变外框的大小,所以要再设置 以及左右按钮的style也要从新设置 <div class="carousel slid ...

随机推荐

  1. Unity 查找

    GameObject.Find().Transform.Find查找游戏对象 1.前置条件 Unity中常用到查找对象,非隐藏的.隐藏的,各种方法性能有高有低,使用又有各种条件限制. 在此对查找的性能 ...

  2. 通过 purge_relay_logs 自动清理relaylog

    使用背景 线上物理备份任务是在从库上进行的,xtrabackup会在备份binlog的时候执行flush logs,relay-log会rotate到新的一个文件号,导致sql thread线程应用完 ...

  3. Arcengine 基本操作（待更新）

    /// <summary> /// 删除fieldName属性值为1的弧段 /// </summary> /// <param name="fieldName& ...

  4. [luoguP3205] [HNOI2010]CHORUS 合唱队（区间DP）

    传送门 注意到只能在两边加人,有一种区间dp的感觉. f[i][j][0/1]表示已经搞完区间[i,j]且上次搞的是左/右的方案数 那么他只能从f[i+1][j]或f[i][j-1]的某种状态得到,随 ...

  5. [canvas入坑0] Jquery + HTML5 做最简易的画板

    查看效果请到 http://philippica.github.io/  点击paint 嗯,心血来潮想做个东西的一部分 html部分不用多说了,重点就是一个canvas <!DOCTYPE h ...

  6. Posix线程编程指南

    Posix线程编程指南 Posix线程编程指南... 1 一线程创建与取消... 2 线程创建... 2 1．线程与进程... 2 2. 创建线程... 2 3. 线程创建属性... 2 4. 创建的 ...

  7. Cover

    [题目描述] 有 N 个时间段,某个时间段可能包含其它时间段. 请找出能包含其它时间段最多的那个段,并计算出它包括的其它时间段有多少? [数据范围] 1 <= N <= 25,000 1  ...

  8. maven中的继承和聚合的关系

    maven中的继承和聚合的关系:两者的目的是不一样的,聚合的目的是能够快速的构建项目,继承的目的是减少重复配置.聚合:定义一个聚合模块,然后在pom文件中添加<module></mo ...

  9. 定时执行rsync同步数据以及mysql备份

    需求:把机器A中的附件.图片等,备份到备份机B中.将数据库进行备份 附件备份 在A中,启动rsync服务,编辑/etc/xinetd.d/rsync文件,将其中的disable=yes改为disabl ...

  10. js-Flexbox盒子布局

    这个年轻的时候,我在项目中其实很少用到: 现在老了,发现了他的好处,我就开始慢慢用到了: 但是其实我对他还是不熟悉的,很陌生,在此做个笔记,加油