bootstrap3-dialog-master模態(tài)框使用詳解

更新時間：2017年08月22日 14:05:08 作者：javanbme

這篇文章主要為大家詳細介紹了bootstrap3-dialog-master模態(tài)框的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

bootstrap3-dialog-master是一款高效，靈活的模態(tài)框，此處為基本知識！

1、源碼地址

https://github.com/nakupanda/bootstrap3-dialog

2、效果展示

3、示例代碼
所需引入的js和css

<link rel="stylesheet" type="text/css" href="css/bootstrap-dialog.css" rel="external nofollow" > 
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" rel="external nofollow" > 
    <script type="text/javascript" src="js/jquery-1.11.3.js"></script> 
    <script type="text/javascript" src="js/bootstrap.js"></script> 
    <script type="text/javascript" src="js/bootstrap-dialog.js"></script>

初始化

<button type="button" id="tm" class="btn btn-primary" style="margin: 100px;">
<span class="glyphicon glyphicon-remove" aria-hidden="true">
</span>點我</button>

js實現(xiàn)代碼

<script > 
    $(function(){ 
           
      $('#tm').on('click',function(){ 
 
            BootstrapDialog.show({ 
              type : BootstrapDialog.TYPE_DANGER, 
              message: '你確定要刪除嗎？', 
              size : BootstrapDialog.SIZE_NORMAL, 
              buttons: [{ 
              label: '確定', 
              action: function(dialog) { 
              dialog.close(); 
              } 
              }, { 
              label: '取消', 
              action: function(dialog) { 
              dialog.close(); 
              } 
              }] 
            }); 
        })  
     })  
</script>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JS實現(xiàn)的排列組合算法示例
這篇文章主要介紹了JS實現(xiàn)的排列組合算法,結(jié)合完整實例形式詳細分析了排列組合算法的原理與javascript相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
2019-07-07
微信小程序防止多次點擊跳轉(zhuǎn)（函數(shù)節(jié)流）
這篇文章主要介紹了微信小程序防止多次點擊跳轉(zhuǎn)問題（函數(shù)節(jié)流）,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-09-09
Radio 單選JS動態(tài)添加的選項onchange事件無效的解決方法
radio 單選JS動態(tài)添加的選項,onchange事件無效。使用delegate（）函數(shù)可以解決該問題，具體解決方案大家通過本文詳細了解下
2016-12-12
JS實現(xiàn)帶陰歷的日歷功能詳解
這篇文章主要介紹了JS實現(xiàn)帶陰歷的日歷功能,結(jié)合實例形式分析了js陰歷算法及實現(xiàn)帶陰歷的日歷相關(guān)操作技巧,需要的朋友可以參考下
2019-01-01
JavaScript實現(xiàn)99乘法表及隔行變色實例代碼
最近做了個項目是要求實現(xiàn)99乘法表隔行變色，本文給大家分享通過多種方式實現(xiàn)js 99 乘法表，感興趣的朋友一起看看吧
2016-02-02
JavaScript計算出兩個數(shù)的差值
這篇文章主要為大家詳細介紹了JavaScript計算出兩個數(shù)的差值，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-03-03
教你用typescript類型來推算斐波那契
斐波那契是自然界與社會中存在的一種數(shù)學(xué)規(guī)律,下面這篇文章主要給大家介紹了關(guān)于如何用typescript類型來推算斐波那契的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-01-01
自定義滾動條3.0
圖片自定義滾動條3.0（Duma“自動渲染版”，也許世間萬物都會變，但是真摯的愛，卻永遠留存在心中！）
2009-07-07
通過event對象的fromElement屬性解決熱區(qū)設(shè)置主實體的一個bug
后臺的熱區(qū)管理中，如果鼠標(biāo)移到熱區(qū)上，會顯示一個提示框，提示框里“設(shè)為主實體”、“刪除”和“合并”等超鏈接，點擊這些超鏈接可以進行各種操作。
2008-12-12
JS 實現(xiàn)獲取驗證碼倒計時功能
這篇文章主要介紹了JS 實現(xiàn)獲取驗證碼倒計時功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-10-10