Bootstrap模態(tài)對話框用法簡單示例

更新時間：2018年08月31日 11:21:40 作者：涵涵YH

這篇文章主要介紹了Bootstrap模態(tài)對話框用法,結合實例形式分析了Bootstrap模態(tài)對話框的簡單創(chuàng)建與使用操作技巧,需要的朋友可以參考下

本文實例講述了Bootstrap模態(tài)對話框用法。分享給大家供大家參考，具體如下：

環(huán)境：bootstrap-3.3.5,jquery-3.0.0

代碼：

<!DOCTYPE html>
<html>
  <head>
  <title>chabaoo.cn bootstrap模態(tài)對話框</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <link rel="stylesheet"  rel="external nofollow" />
    <link rel="stylesheet"  rel="external nofollow" />
    <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js" ></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js" ></script>
  </head>
  <body>
<h2>創(chuàng)建模態(tài)框（Modal）</h2>
<!-- 按鈕觸發(fā)模態(tài)框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal"
  data-target="#myModal">
  開始演示模態(tài)框
</button>
<!-- 模態(tài)框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
  aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
   <div class="modal-content">
     <div class="modal-header">
      <button type="button" class="close"
        data-dismiss="modal" aria-hidden="true">
         ×
      </button>
      <h4 class="modal-title" id="myModalLabel">
        模態(tài)框（Modal）標題
      </h4>
     </div>
     <div class="modal-body">
      在這里添加一些文本
     </div>
     <div class="modal-footer">
      <button type="button" class="btn btn-default"
        data-dismiss="modal">關閉
      </button>
      <button type="button" class="btn btn-primary">
        提交更改
      </button>
     </div>
   </div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
  </body>
</html>

小編已經將代碼中所引用的bootstrap相關css、js文件全部換成了cdn形式，方便測試。

這里使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試，可得到如下顯示效果：

PS：關于bootstrap布局，這里再為大家推薦一款本站的在線可視化布局工具供大家參考使用：

在線bootstrap可視化布局編輯工具：
http://tools.jb51.net/aideddesign/layoutit

希望本文所述對大家基于bootstrap的程序設計有所幫助。

您可能感興趣的文章:

文本框回車提交與禁止提交示例
文本框輸入數據后使用回車進行提交，想必大家都嘗試過吧，在本文有個不錯的示例，喜歡的朋友可以參下
2013-09-09
詳解如何在TypeScript中聲明全局變量
本文主要介紹了如何在 TypeScript 中聲明全局變量,在TypeScript中,可以使用declare關鍵字來聲明全局變量,這樣的聲明告訴編譯器該變量是在其他地方定義的,而不需要實際的實現(xiàn),文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下
2023-08-08
javascript獲取wx.config內部字段解決微信分享
這篇文章主要介紹了javascript獲取wx.config內部字段解決微信分享,需要的朋友可以參考下
2016-03-03
微信小程序ajax實現(xiàn)請求服務器數據及模版遍歷數據功能示例
這篇文章主要介紹了微信小程序ajax實現(xiàn)請求服務器數據及模版遍歷數據功能,結合實例形式分析了微信小程序ajax調用及模板wx:for循環(huán)列表渲染相關操作技巧,需要的朋友可以參考下
2017-12-12
詳解JavaScript中Arguments對象用途
本文主要介紹了詳解JavaScript中Arguments對象用途，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08
JavaScript 格式化金額常見方法
這篇文章主要介紹了JavaScript 格式化金額最常見方法，本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2023-05-05
ts封裝axios最佳實踐示例詳解
這篇文章主要為大家介紹了ts封裝axios最佳實踐示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-03-03
JavaScript實現(xiàn)伸縮二級菜單
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)伸縮二級菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-10-10
如何解決前端筆記本屏幕顯示縮放比例125%,150%對頁面布局的影響
如果要完整解決該縮放和布局問題,仍需適配,下面這篇文章主要給大家介紹了關于如何解決前端筆記本屏幕顯示縮放比例125%,150%對頁面布局的影響,需要的朋友可以參考下
2022-11-11
JavaScript 數組展平方法: flat() 和 flatMap()詳解
從 ES2019 中開始引入了一種扁平化數組的新方法，可以展平任何深度的數組，這篇文章主要介紹了JavaScript 數組展平方法: flat() 和 flatMap()詳解,需要的朋友可以參考下
2023-06-06