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. WF 18 A 想法

    UPD:我理解错题意了. 考虑在时刻 $t$ 从站点 $u$ 出发的公交车,将这些车的集合记做 $B(u,t)$,$B(u,t)$ 是个随机变量. 令 $\mathrm{Pr}_{B(u,t)} = ...

  2. [国家集训队][bzoj2120] 数颜色 [带修改莫队]

    题面: 传送门 思路: 这道题和SDOI2009的HH的项链很像,只是多了一个修改 模板套上去呀 莫队学习请戳这里:莫队 Code: #include<iostream> #include ...

  3. hdu5834 Magic boy Bi Luo with his excited tree 【树形dp】

    题目链接 hdu5834 题解 思路很粗犷,实现很难受 设\(f[i][0|1]\)表示向子树走回来或不回来的最大收益 设\(g[i][0|1]\)表示向父亲走走回来或不回来的最大收益 再设\(h[i ...

  4. 亚瑟王(arthur)

    亚瑟王(arthur) 题目描述 小K不慎被LL邪教洗脑了,洗脑程度深到他甚至想要从亚瑟王邪教中脱坑.他决定,在脱坑之前,最后再来打一盘亚瑟王.既然是最后一战,就一定要打得漂亮.众所周知,亚瑟王是一个 ...

  5. 【06】Vue 之 组件化开发

    组件其实就是一个拥有样式.动画.js逻辑.HTML结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue的组件和也做的非常彻底,而且有自己的特色.尤其是她 ...

  6. BZOJ 3513: [MUTC2013]idiots

    3513: [MUTC2013]idiots Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 476  Solved: 162[Submit][Stat ...

  7. js常用方法 备用

    /* function obj$(id)                      根据id得到对象 function val$(id)                      根据id得到对象的值 ...

  8. dva脚手架 dva-cli 配置roadhogrc，antd-mobile样式按需加载 不生效的问题

    1.新安装dva-cli脚手架版本0.9.2,dva版本是2.4.1,roadhogrc版本是2.4.9 roadhogrc2 与1 的区别把roadhogrc 改成了webpackrc 所以配置an ...

  9. 前端知识点总结——CSS

    1.CSS的概述 1.什么是CSS? CSS:Cascading Style Sheets层叠样式表,级联样式表(简称:样式表) 2.作用 设置HTML网页元素的样式 3.HTML与CSS的关系 HT ...

  10. [LeetCode] Trapping Rain Water 栈

    Given n non-negative integers representing an elevation map where the width of each bar is 1, comput ...