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. 异常为"当IDENTITY_INSERT设置为OFF时" 解决办法

    当 IDENTITY_INSERT 设置为 OFF 时,不能向表"A" 中的标识列插入显示值. 一般来说是自增ID造成的. 因此可以在数据库insert语句前加上 SET iden ...

  2. [Gym101982M][思维好题][凸壳]Mobilization

    [gym101982M][思维好题][凸壳]Mobilization 题目链接 20182019-acmicpc-pacific-northwest-regional-contest-div-1-en ...

  3. 【bzoj2527】[Poi2011]Meteors 整体二分+树状数组

    题目描述 有N个成员国.现在它发现了一颗新的星球,这颗星球的轨道被分为M份(第M份和第1份相邻),第i份上有第Ai个国家的太空站. 这个星球经常会下陨石雨.BIU已经预测了接下来K场陨石雨的情况.BI ...

  4. SCU 4438 Censor（哈希+模拟栈）

    Censor frog is now a editor to censor so-called sensitive words (敏感词). She has a long text \(p\). He ...

  5. POJ3648 Wedding 【2-sat】

    题目 Up to thirty couples will attend a wedding feast, at which they will be seated on either side of ...

  6. 刷题总结——纸带（NOIP赛前模拟）

    题目: 有一个无限长的纸带··上面被划分为若干个格子··现在进行N次操作,第i次操作在L到R上擦出曾经写上的数字(如果有),并写上数字i,询问最终可以看到多少个数字 N小于10^6 题解: 首先毫无疑 ...

  7. flake8（代码规范利器）

    flake8(代码规范利器) 概述 flake8是下面三个工具的封装: 1)PyFlakes 2)Pep8 3)NedBatchelder’s McCabe script Flake8的下载地址:ht ...

  8. DataBinder.Eval值的判断

    原文发布时间为:2009-04-10 -- 来源于本人的百度文章 [由搬家工具导入] 问：如何对<%# DataBinder.Eval(Container.DataItem,"Ly_R ...

  9. httpclient与webapi

    System.Net.Http 是微软推出的最新的 HTTP 应用程序的编程接口, 微软称之为“现代化的 HTTP 编程接口”, 主要提供如下内容: 1. 用户通过 HTTP 使用现代化的 Web S ...

  10. 调试UPX压缩的notepad

    @date: 2016/11/29 @author: dlive 0x01 运行时压缩 对比upx压缩前后的notepad可以看到如下特点 PE头的大小一样 节区名称改变(.text -> .U ...