Bootstrap 模態框、輪播 結合使用
阿新 • • 發佈：2019-02-12
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="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>