Bootstrap 模态框、轮播结合使用

最新推荐文章于 2024-08-26 08:08:59 发布

进击的鼻孔猫

最新推荐文章于 2024-08-26 08:08:59 发布

阅读量3.6k

点赞数

分类专栏： php 文章标签： bootstrap 模态框轮播

本文链接：https://blog.csdn.net/zhangxbj/article/details/46889793

版权

本文介绍如何将Bootstrap的模态框与轮播组件结合使用，提供了一个将图片轮播嵌入模态框内的实例。在实现过程中，作者遇到并解决了若干问题，实现了点击按钮弹出带有轮播图片的模态框，点击外部区域则关闭模态框的功能。

摘要由CSDN通过智能技术生成

Bootstrap 模态框和轮播分开使用的教程网上很多。但是两者结合使用的例子和资料很少。两者结合使用时，开始我遇到了不少bug，现在分享给大家。

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

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

代码如下：

<!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=