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>www.dhdzp.com 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的程序設計有所幫助。

您可能感興趣的文章:

監(jiān)控 url fragment變化的js代碼
url 里面的 #后面的部分可以實現無刷新的改變url 的值。這個特點非常有用。比如視頻網站土豆中的豆單，你進入視頻列表以后，點擊播放某個視頻。
2010-04-04
js報錯:Maximum?call?stack?size?exceeded的解決方法
這篇文章主要給大家介紹了關于js報錯Maximum?call?stack?size?exceeded的解決方法,文中通過實例代碼將解決的方法介紹的非常詳細,需要的朋友可以參考下
2023-02-02
JavaScript類型檢測的方法實例教程
這篇文章主要給大家介紹了關于JavaScript類型檢測的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-04-04
js 冒泡事件與事件監(jiān)聽使用分析
js 冒泡事件與事件監(jiān)聽代碼分析
2009-09-09
JavaScript進階（四）原型與原型鏈用法實例分析
這篇文章主要介紹了JavaScript原型與原型鏈,結合實例形式分析了JavaScript原型與原型鏈基本概念、原理、用法及操作注意事項,需要的朋友可以參考下
2020-05-05
微信小程序實現的日期午別醫(yī)生排班表功能示例
這篇文章主要介紹了微信小程序實現的日期午別醫(yī)生排班表功能,結合實例形式分析了微信小程序實現基于日期時間、針對上午、下午、凌晨、夜間等時段的排班功能相關操作技巧,需要的朋友可以參考下
2019-01-01
Sourcemap源代碼映射詳細介紹
這篇文章主要為大家介紹了Sourcemap源代碼映射介紹及示例詳解解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪<BR>
2023-04-04
JS電梯導航的實現示例
本文主要介紹了JS電梯導航的實現示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-05-05
JS 組件系列之Bootstrap Table 凍結列功能IE瀏覽器兼容性問題解決方案
這篇文章主要介紹了JS 組件系列之Bootstrap Table 凍結列功能IE瀏覽器兼容性問題解決方案,需要的朋友可以參考下
2017-06-06
javascript 語法學習練習
javascript 截取字符串排序
2008-12-12