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. BZOJ 4569 [Scoi2016]萌萌哒 ——ST表 并查集

    好题. ST表又叫做稀疏表,这里利用了他的性质. 显然每一个条件可以分成n个条件,显然过不了. 然后发现有许多状态是重复的,首先考虑线段树,没什么卵用. 然后ST表,可以每一层表示对应的区间大小的两个 ...

  2. linux压缩文件——解压方法

    linux下 tar解压 gz解压 bz2等各种解压文件使用方法 .tar 解包:tar xvf FileName.tar 打包:tar cvf FileName.tar DirName (注:tar ...

  3. bzoj2338数矩形(rectangle)

    数矩形(rectangle) 计算几何 把所有点两两连线,把这些线按长度排序,再按中点排序 能组成矩形的线一定是连续的 最坏就是所有点围成一个圆,交于圆心 复杂度O(可以过) 要用叉积,不然会被卡精 ...

  4. vue 中父子组件传值：props和$emit

    更新----------- 1 父组件向子组件传值:通过props数组: 在vue-cli Login.vue父组件中有AcceptAndRefuse.vue子组件,首先import进子组件hello ...

  5. float 及 overflow 的理解

    1.CSS 盒子模型: 2.float 支持属性:left right none inherit(部分支持) (1)float 属性影响范围:对紧随其后的块儿级元素起作用. (2)清除浮动常用方法:在 ...

  6. T-SQL百万记录中分组取最大值方法ROW_NUMBER() OVER（）

    SELECT SysUserID, UserID, ROW_NUMBER() OVER(PARTITION BY UserID ORDER BY AddTime DESC) AS nums AND S ...

  7. Netbeans 8.2启动参数含义及配置

    在manjaro linux中Netbeans8.2 + JDK 1.8 netbeans的配置文件具体在:/usr/share/netbeans/etc/netbeans.conf,需要使用root ...

  8. C#反射(Reflection)详解

    1. 什么是反射2. 命名空间与装配件的关系3. 运行期得到类型信息有什么用4. 如何使用反射获取类型5. 如何根据类型来动态创建对象6. 如何获取方法以及动态调用方法7. 动态创建委托 1.什么是反 ...

  9. LeetCode OJ-- Text Justification

    https://oj.leetcode.com/problems/text-justification/ 细节题 class Solution { public: vector<string&g ...

  10. Building MFC application with /MD[d] (CRT dll version)requires MFC shared dll version

    解决方法: