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 相关文章推荐
取键盘键位ASCII码的网页
Jul 30 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
Sep 25 Javascript
JS使用getComputedStyle()方法获取CSS属性值
Apr 23 Javascript
Node.js中使用mongoskin操作mongoDB实例
Sep 28 Javascript
Javascript实现获取及设置光标位置的方法
Jul 21 Javascript
探究JavaScript中的五种事件处理程序方式
Dec 07 Javascript
js实现的简练高效拖拽功能示例
Dec 21 Javascript
利用Vue v-model实现一个自定义的表单组件
Apr 27 Javascript
p5.js入门教程之鼠标交互的示例
Mar 16 Javascript
webpack打包react项目的实现方法
Jun 21 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
Jul 19 Javascript
vue给对象动态添加属性和值的实例
Sep 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
PHP 防恶意刷新实现代码
2010/05/16 PHP
PHP经典面试题集锦
2015/03/19 PHP
PHP使用GD库输出汉字的方法【测试可用】
2016/11/10 PHP
PHP简单实现二维数组的矩阵转置操作示例
2017/11/24 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
Locate a File Using a File Open Dialog Box
2007/06/18 Javascript
JS动态添加option和删除option(附实例代码)
2013/04/01 Javascript
JQuery伸缩导航练习示例
2013/11/13 Javascript
jQuery基于当前元素进行下一步的遍历
2014/05/20 Javascript
JavaScript实现随机替换图片的方法
2015/04/16 Javascript
JavaScript 数组some()和filter()的用法及区别
2016/05/20 Javascript
node中使用es5/6以及支持性与性能对比
2017/08/11 Javascript
vue2单元测试环境搭建
2018/05/24 Javascript
angular2实现统一的http请求头方法
2018/08/13 Javascript
React router动态加载组件之适配器模式的应用详解
2018/09/12 Javascript
vue中过滤器filter的讲解
2019/01/21 Javascript
在Vue里如何把网页的数据导出到Excel的方法
2020/09/30 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
2020/11/12 Javascript
JavaScript实现原型封装轮播图
2020/12/27 Javascript
[00:30]明星选手化身超级英雄!2018DOTA2亚洲邀请赛全明星赛来临!
2018/04/06 DOTA
python算法学习之基数排序实例
2013/12/18 Python
python发送HTTP请求的方法小结
2015/07/08 Python
Python自动登录126邮箱的方法
2015/07/10 Python
Python学习笔记之解析json的方法分析
2017/04/21 Python
Python利用QQ邮箱发送邮件的实现方法(分享)
2017/06/09 Python
Python将一个Excel拆分为多个Excel
2018/11/07 Python
Python传递参数的多种方式(小结)
2019/09/18 Python
Python实现新型冠状病毒传播模型及预测代码实例
2020/02/05 Python
纯CSS3实现鼠标悬停提示气泡效果
2014/02/28 HTML / CSS
大学生职业生涯规划书前言
2014/01/09 职场文书
技术负责人任命书
2014/06/05 职场文书
合作协议书范文
2014/08/20 职场文书
营销总监岗位职责
2014/09/16 职场文书
Python通过m3u8文件下载合并ts视频的操作
2021/04/16 Python
用Python简陋模拟n阶魔方
2021/04/17 Python
Python常遇到的错误和异常
2021/11/02 Python