bootstrap3-dialog-master模态框使用详解


Posted in Javascript onAugust 22, 2017

 bootstrap3-dialog-master是一款高效,灵活的模态框,此处为基本知识!

1、源码地址

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

2、效果展示

bootstrap3-dialog-master模态框使用详解

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实现代码

<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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript DOM 学习第二章 编辑文本
Feb 19 Javascript
jQuery 过滤not()与filter()实例代码
May 10 Javascript
javascript封装的sqlite操作类实例
Jul 17 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
Jan 01 Javascript
设置jquery UI 控件的大小方法
Dec 12 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
Dec 14 Javascript
JQuery ZTree使用方法详解
Jan 07 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
解决LayUI表单获取不到data的问题
Aug 20 Javascript
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
更强大的vue ssr实现预取数据的方式
Jul 19 Javascript
JavaScript中的this妙用实例分析
May 09 Javascript
关于JS与jQuery中的文档加载问题
Aug 22 #jQuery
bootstrap confirmation按钮提示组件使用详解
Aug 22 #Javascript
bootstrap multiselect下拉列表功能
Aug 22 #Javascript
浅谈Vue父子组件和非父子组件传值问题
Aug 22 #Javascript
纯js实现图片匀速淡入淡出效果
Aug 22 #Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
Aug 22 #Javascript
Angular中响应式表单的三种更新值方法详析
Aug 22 #Javascript
You might like
30 个很棒的PHP开源CMS内容管理系统小结
2011/10/14 PHP
Zend的AutoLoad机制介绍
2012/09/27 PHP
laravel实现于语言包的完美切换方法
2019/09/29 PHP
浏览器脚本兼容 文本框中,回车键触发事件的兼容
2010/06/21 Javascript
js打开新窗口方法整理
2014/02/17 Javascript
JS判断文本框内容改变事件的简单实例
2014/03/07 Javascript
node.js中的buffer.toJSON方法使用说明
2014/12/14 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
2015/10/08 Javascript
js自定义回调函数
2015/12/13 Javascript
JavaScript的模块化开发框架Sea.js上手指南
2016/05/12 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
详解nodeJS之路径PATH模块
2017/05/31 NodeJs
JS拖动选择table里的单元格完整实例【基于jQuery】
2019/05/28 jQuery
axios异步提交表单数据的几种方法
2019/08/11 Javascript
Vuejs中的watch实例详解(监听者)
2020/01/05 Javascript
JS函数本身的作用域实例分析
2020/03/16 Javascript
js操作两个json数组合并、去重,以及删除某一项元素
2020/09/22 Javascript
[01:01:35]Optic vs paiN 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
PyQt5实现简易计算器
2020/05/30 Python
pywinauto自动化操作记事本
2019/08/26 Python
Python 切分数组实例解析
2019/11/07 Python
opencv resize图片为正方形尺寸的实现方法
2019/12/26 Python
python 工具 字符串转numpy浮点数组的实现
2020/03/14 Python
python实现opencv+scoket网络实时图传
2020/03/20 Python
pandas数据选取:df[] df.loc[] df.iloc[] df.ix[] df.at[] df.iat[]
2020/04/24 Python
PyInstaller运行原理及常用操作详解
2020/06/13 Python
CSS书写规范、顺序和命名规则
2014/03/06 HTML / CSS
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
压铸汽车模型收藏家:Diecastmodelswholesale.com
2016/12/21 全球购物
师范生见习报告范文
2014/11/03 职场文书
2015圣诞节贺卡寄语
2015/03/24 职场文书
公司市场部岗位职责
2015/04/15 职场文书
检讨书模板大全
2015/05/07 职场文书
vue实现简单数据双向绑定
2021/04/28 Vue.js
Python 数据结构之十大经典排序算法一文通关
2021/10/16 Python
Windows server 2003卸载和安装IIS的图文教程
2022/07/15 Servers