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 相关文章推荐
jQuery Ajax文件上传(php)
Jun 16 Javascript
javascript实现获取服务器时间
May 19 Javascript
jQuery ajax时间差导致的变量赋值问题分析
Jan 22 Javascript
Bootstrap入门书籍之(三)栅格系统
Feb 17 Javascript
vue.js声明式渲染和条件与循环基础知识
Jul 31 Javascript
weui框架实现上传、预览和删除图片功能代码
Aug 24 Javascript
Express + Session 实现登录验证功能
Sep 08 Javascript
react-router v4如何使用history控制路由跳转详解
Jan 09 Javascript
详解使用VueJS开发项目中的兼容问题
Aug 02 Javascript
vue router 跳转后回到顶部的实例
Aug 31 Javascript
vue使用video插件vue-video-player详解
Oct 23 Javascript
JavaScript 数组去重详解
Sep 15 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/06/08 PHP
PHP常用的排序和查找算法
2015/08/06 PHP
读jQuery之四(优雅的迭代)
2011/06/20 Javascript
jQuery中校验时间格式的正则表达式小结
2013/09/22 Javascript
jquery禁用右键示例
2014/04/28 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
2015/01/09 Javascript
日常收集整理的JavaScript常用函数方法
2015/12/10 Javascript
jQuery获取浏览器类型和版本号的方法
2016/07/05 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
2016/07/06 Javascript
JavaScript 中对象的深拷贝
2016/12/04 Javascript
localStorage的黑科技-js和css缓存机制
2017/02/06 Javascript
node.js中express中间件body-parser的介绍与用法详解
2017/05/23 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
2018/09/04 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
2019/09/12 Javascript
使用JS监听键盘按下事件(keydown event)
2019/11/07 Javascript
JS快速实现简单计算器
2020/04/08 Javascript
python 调用HBase的简单实例
2016/12/18 Python
python+selenium实现京东自动登录及秒杀功能
2017/11/18 Python
浅谈flask截获所有访问及before/after_request修饰器
2018/01/18 Python
pycharm+django创建一个搜索网页实例代码
2018/01/24 Python
python 获取微信好友列表的方法(微信web)
2019/02/21 Python
Django框架自定义session处理操作示例
2019/05/27 Python
Python FFT合成波形的实例
2019/12/04 Python
Python 爬取必应壁纸的实例讲解
2020/02/24 Python
浅析matlab中imadjust函数
2020/02/27 Python
印尼太阳百货公司网站:Matahari
2018/02/04 全球购物
会议活动邀请函
2014/01/27 职场文书
经理秘书求职自荐信范文
2014/03/23 职场文书
高校优秀辅导员事迹材料
2014/05/07 职场文书
转让协议书范本
2014/09/13 职场文书
论文致谢词范文
2015/05/14 职场文书
2016年暑假学生家长评语
2015/12/01 职场文书
离婚协议书范本(2016最新版)
2016/03/18 职场文书
使用react-virtualized实现图片动态高度长列表的问题
2021/05/28 Javascript
Python机器学习之底层实现KNN
2021/06/20 Python
Java9新特性对HTTP2协议支持与非阻塞HTTP API
2022/03/16 Java/Android