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的弹出消息插件 DivAlert之旅(一)
Apr 01 Javascript
js实现刷新iframe的方法汇总
Apr 27 Javascript
JS使用正则表达式除去字符串中重复字符的方法
Nov 05 Javascript
IE下JS保存图片的简单实例
Jul 15 Javascript
JS实现获取当前URL和来源URL的方法
Aug 24 Javascript
jQuery validate插件功能与用法详解
Dec 15 Javascript
详解vue组件化开发-vuex状态管理库
Apr 10 Javascript
详解基于webpack搭建react运行环境
Jun 01 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
Aug 22 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
Sep 13 Javascript
this在vue和小程序中的使用详解
Jan 28 Javascript
使用ThinkJs搭建微信中控服务的实现方法
Aug 08 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
Gregarius中文日期格式问题解决办法
2008/04/22 PHP
js+php实现静态页面实时调用用户登陆状态的方法
2015/01/04 PHP
php实现的简单美国商品税计算函数
2015/07/13 PHP
PHP的swoole扩展安装方法详细教程
2016/05/18 PHP
Django中的cookie与session操作实例代码
2017/08/17 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
IE/FireFox具备兼容性的拖动代码
2007/08/13 Javascript
最简单的js图片切换效果实现代码
2011/09/24 Javascript
javascript实现文本域写入字符时限定字数
2014/02/12 Javascript
js从Cookies里面取值的简单实现
2014/06/30 Javascript
Javascript基础教程之数据类型转换
2015/01/18 Javascript
Node.js中的缓冲与流模块详细介绍
2015/02/11 Javascript
BootStrap 可编辑表Table格
2016/11/24 Javascript
js中创建对象的几种方式
2017/02/05 Javascript
JS正则替换去空格的方法
2017/03/24 Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
2018/07/11 Javascript
30分钟快速实现小程序语音识别功能
2018/11/27 Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
2019/08/09 Javascript
layer.open 获取不到表单信息的解决方法
2019/09/26 Javascript
Openlayers测量距离与面积的实现方法
2020/09/25 Javascript
以911新闻为例演示Python实现数据可视化的教程
2015/04/23 Python
Python实现栈的方法
2015/05/26 Python
Python基于递归算法实现的走迷宫问题
2017/08/04 Python
Python pyinotify模块实现对文档的实时监控功能方法
2018/10/13 Python
python3.4爬虫demo
2019/01/22 Python
python中的反斜杠问题深入讲解
2019/08/12 Python
Python 调用 Windows API COM 新法
2019/08/22 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
python进度条显示-tqmd模块的实现示例
2020/08/23 Python
美国一家全面的在线零售鞋类公司:SHOEBACCA
2017/01/06 全球购物
党员活动日总结
2014/05/05 职场文书
2016年万圣节家长开放日活动总结
2016/04/05 职场文书
2019各种保证书范文
2019/06/24 职场文书
MySQL基础(一)
2021/04/05 MySQL
利用Python实现Picgo图床工具
2021/11/23 Python