BootStrap中動態模態框以及靜態模態框的代碼實現

最後更新：2018-08-13 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本篇文章給大家帶來的內容是關於BootStrap中動態模態框以及靜態模態框的代碼實現，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。

要用bootStrap這個架構就必須要重載它的class類,也就是說class要一樣

代碼如下：

動態模態框

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title>    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">    <script src="bootstrap-3.3.7/js/jquery.min.js"></script>    <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>    <script src="bootstrap-3.3.7/js/docs.min.js"></script></head><body>        <div>                <div>                    <div>bootstrap架構 <small>s</small>                    </div>                </div>    <!-- 動態框 --><div>    <!-- modal預設是隱藏的 -->    <div>                          <div>         <!-- 頭部關閉按鈕 -->            <div>                             <button type="button" class="close myclose" data-dismiss="modal"><span >&times</span></button>                <div class="h3 modal-title">標題部分</div>                <!-- 內容部分 -->                <div>                    <P>這是內容部分</P>                </div>                <!-- 頁尾 -->                <div>                    <button type="button" class="btn btn-primary myclose" data-dismiss="modal">Close</button>                    <button type="button" class="btn btn-warning myclose">save</button>                </div>            </div>        </div>    </div>    </div>    <a href="#" class="btn btn-success" id="show">顯示對話方塊</a>        </div></body></html><script>    $(function(){        $('#show').click(function(){            $('.modal').modal('show')        })    })</script>

靜態模態框

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title>    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css">    <script src="bootstrap-3.3.7/js/jquery.min.js"></script>    <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>    <script src="bootstrap-3.3.7/js/docs.min.js"></script></head><body>    <div>        <div>            <div>bootstrap架構 <small>s</small>            </div>                    <!-- 靜態模態框 官方有一個bug就是在寫靜態框的時候在按鈕上要綁定同一個class-->                <div>                    <div>                        <div>                            <button type="button" class="close myclose" data-dismiss="modal">                                <span>&times;</span>                            </button>                            <h3>Model標題</h3>                                                 </div>                     <!-- body部分 -->                     <div>                         <p>這是身體部分</p>                     </div>                     <!-- footer部分 -->                     <div>                         <button class="btn btn-info myclose" data-dismiss="modal">close</button>                         <button class="btn btn-primary myclose">save</button>                     </div>                    </div>                </div>           </div> </div>       </div>    </div></body></html><script>    $(function(){        $('.myclose').click(function(){            $('.modal-dialog').css('display','none')        })    })</script>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More