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 相关文章推荐
ExtJS 2.0实用简明教程 之获得ExtJS
Apr 29 Javascript
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
Aug 28 Javascript
一个简单的js树形菜单
Dec 09 Javascript
使用JQuery在线制作ppt并在线演示源码特效
Sep 08 Javascript
js省市县三级联动效果实例
Apr 15 Javascript
Bootstrap学习笔记之css样式设计(2)
Jun 07 Javascript
jQuery基本筛选选择器实例代码
Feb 06 Javascript
微信小程序左右滑动的实现代码
Dec 15 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
Jan 12 Javascript
vue使用swiper实现左右滑动切换图片
Oct 16 Javascript
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
微信小程序视频弹幕发送功能的实现
Dec 28 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
对Session和Cookie的区分与解释
2007/03/16 PHP
PHP+jQuery+Ajax实现用户登录与退出
2015/04/27 PHP
Symfony查询方法实例小结
2017/06/28 PHP
Thinkphp 3.2框架使用Redis的方法详解
2019/10/24 PHP
jquery validate.js表单验证的基本用法入门
2010/05/13 Javascript
Jquery获取元素的父容器对象示例代码
2014/02/10 Javascript
javascript下拉框选项单击事件的例子分享
2015/03/04 Javascript
学习JavaScript设计模式(链式调用)
2015/11/26 Javascript
浅谈JavaScript中的分支结构
2016/07/01 Javascript
AngularJS基础 ng-init 指令简单示例
2016/08/02 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
2016/10/05 Javascript
js移动端事件基础及常用事件库详解
2017/08/15 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
2018/10/08 Javascript
详解vuex 渐进式教程实例代码
2018/11/27 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
2019/05/14 Javascript
JavaScript面向对象中接口实现方法详解
2019/07/24 Javascript
解决Vue中 父子传值 数据丢失问题
2019/08/27 Javascript
flexible.js实现移动端rem适配方案
2020/04/07 Javascript
[44:40]Serenity vs Pain 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
跟老齐学Python之不要红头文件(1)
2014/09/28 Python
详解Python的Django框架中的templates设置
2015/05/11 Python
python实现读Excel写入.txt的方法
2018/04/29 Python
Django中STATIC_ROOT和STATIC_URL及STATICFILES_DIRS浅析
2018/05/08 Python
弄懂这56个Python使用技巧(轻松掌握Python高效开发)
2019/09/18 Python
解决json中ensure_ascii=False的问题
2020/04/03 Python
Python如何进行时间处理
2020/08/06 Python
CSS3教程(1):什么是CSS3
2009/04/02 HTML / CSS
福克斯租车:Fox Rent A Car
2017/04/13 全球购物
JSP和Servlet有哪些相同点和不同点,他们之间的联系是什么?
2015/10/22 面试题
2014全国两会学习心得体会2000字
2014/03/10 职场文书
个人工作表现评语
2014/04/30 职场文书
市场督导岗位职责
2015/04/10 职场文书
2015年大学团支部工作总结
2015/05/13 职场文书
世界名著读书笔记
2015/06/25 职场文书
2016教师政治学习心得体会
2016/01/23 职场文书
golang interface判断为空nil的实现代码
2021/04/24 Golang