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

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

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

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

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>點(diǎn)我</button>

js實(shí)現(xiàn)代碼

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

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

您可能感興趣的文章:

相關(guān)文章

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