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. 【bzoj2882】工艺 后缀自动机+STL-map

    题目描述 小敏和小燕是一对好朋友. 他们正在玩一种神奇的游戏,叫Minecraft. 他们现在要做一个由方块构成的长条工艺品.但是方块现在是乱的,而且由于机器的要求,他们只能做到把这个工艺品最左边的方 ...

  2. GDOI2018前夕 错误总结

    算法易错点 $FFT$ 1.注意精度,以及是否取整 2.注意$complex$类不要写错,复数乘法是这样的: complex operator *(const complex &b){retu ...

  3. kubernetes 之dns 服务发现

    1.在每个节点上面导入如下镜像 [root@node1 DNS]# lltotal 59816-rw-r--r--. 1 root root 8603136 Nov 25 18:13 execheal ...

  4. Python之面向对象：面向对象基础

    一.面向过程.面向对象对比 1.面向过程 根据业务逻辑从上到下写垒代码 2.函数式思想 将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可 3.面向对象 对函数进行分类和封装 1.2.3一步 ...

  5. 【HDOJ5527】Too Rich（贪心，构造）

    题意:给定10种面额的货币和它们的数量上限,问构造出恰好总额为P的最小张数,无解输出-1 T=2e4,p<=1e9,c[i]<=1e5 思路:From https://blog.csdn. ...

  6. wap提交表单

    原文发布时间为:2010-08-31 -- 来源于本人的百度文章 [由搬家工具导入] <%@ page contentType="text/vnd.wap.wml" page ...

  7. bugs view:

    Expecially those business bugs! I should check better especially when data changes! This place requi ...

  8. H5 <audio> 音频标签自定义样式修改以及添加播放控制事件

    H5 <audio> 音频标签自定义样式修改以及添加播放控制事件 Dandelion_drq 关注 2017.08.28 14:48* 字数 331 阅读 2902评论 3喜欢 3 说明: ...

  9. duilib入门简明教程 -- 第一个程序 Hello World(3) （转）

    原文转自 http://www.cnblogs.com/Alberl/p/3343579.html 小伙伴们有点迫不及待了么,来看一看Hello World吧: 新建一个空的win32项目,新建一个m ...

  10. ubuntu 15.10 64bit 下 steam无法启动

    首先查看steam日志,在/tmp/dumps/下,以“用户名_output.txt”命名. $ cat /tmp/dumps/liuxu_output.txt Running Steam on ub ...