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中统计Textarea字数并提示还能输入的字符
Jun 10 Javascript
jquery 遍历数组 each 方法详解
May 25 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
Aug 01 Javascript
利用Angularjs和bootstrap实现购物车功能
Aug 31 Javascript
AngularJS 中的Promise --- $q服务详解
Sep 14 Javascript
移动端脚本框架Hammer.js
Dec 15 Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
vue-cli实现多页面多路由的示例代码
Jan 30 Javascript
vue观察模式浅析
Sep 25 Javascript
js取小数点后两位四种方法
Jan 18 Javascript
前端开发基础javaScript的六大作用
Aug 06 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
preg_match_all使用心得分享
2014/01/31 PHP
详解PHP的Laravel框架中Eloquent对象关系映射使用
2016/02/26 PHP
php构造方法中析构方法在继承中的表现
2016/04/12 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
php适配器模式简单应用示例
2019/10/23 PHP
jquery 插件实现图片延迟加载效果代码
2010/02/06 Javascript
aspx中利用js实现确认删除代码
2010/07/22 Javascript
jquery下实现overlay遮罩层代码
2010/08/25 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
2014/05/16 Javascript
编写自己的jQuery提示框(Tip)插件
2015/02/05 Javascript
基于javascript实现单选及多选的向右和向左移动实例
2015/07/25 Javascript
js密码强度检测
2016/01/07 Javascript
jQuery过滤选择器经典应用
2016/08/18 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
2017/08/28 Javascript
Vue组件全局注册实现警告框的实例详解
2018/06/11 Javascript
深入Node TCP模块的理解
2019/03/13 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
2019/05/09 Javascript
VUE注册全局组件和局部组件过程解析
2019/10/10 Javascript
js生成1到100的随机数最简单的实现方法
2020/02/07 Javascript
基于html+css+js实现简易计算器代码实例
2020/02/28 Javascript
js实现时间日期校验
2020/05/26 Javascript
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
[01:07:11]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python正则表达式常用函数总结
2017/06/24 Python
pyQT5 实现窗体之间传值的示例
2019/06/20 Python
opencv+python实现鼠标点击图像,输出该点的RGB和HSV值
2020/06/02 Python
最新版 Windows10上安装Python 3.8.5的步骤详解
2020/11/28 Python
进程的查看和调度分别使用什么命令
2015/03/25 面试题
仓管岗位职责范本
2014/02/08 职场文书
Pytest实现setup和teardown的详细使用详解
2021/04/17 Python
redis 限制内存使用大小的实现
2021/05/08 Redis
MySQL磁盘碎片整理实例演示
2022/04/03 MySQL
springcloud整合seata
2022/05/20 Java/Android
PHP 时间处理类Carbon
2022/05/20 PHP
win11电脑关机鼠标灯还亮怎么解决? win11关机后鼠标灯还亮解决方法
2023/01/09 数码科技