快捷導(dǎo)航

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

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

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

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

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

代碼：

<!DOCTYPE html>
<html>
  <head>
  <title>www.dbjr.com.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）標(biāo)題
      </h4>
     </div>
     <div class="modal-body">
      在這里添加一些文本
     </div>
     <div class="modal-footer">
      <button type="button" class="btn btn-default"
        data-dismiss="modal">關(guān)閉
      </button>
      <button type="button" class="btn btn-primary">
        提交更改
      </button>
     </div>
   </div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
  </body>
</html>

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

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

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

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

希望本文所述對大家基于bootstrap的程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

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