Bootstrap BootstrapDialog使用详解


Posted in Javascript onFebruary 17, 2017

这里有两种展现方式

写在前面:首先你要引入的库有
css : bootstrap.min.css bootstrap-dialog.css
js : jquery-1.11.1.min.js bootstrap.min.js bootstrap-dialog.js

1、通过html代码显示

<!-- Button trigger modal 弹出框的触发器 -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal 弹出框的结构 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

这种方式简单直观; 但会增加html的‘重量',而且不够灵活,大量使用时不建议使用

2、通过js的方式展现(需要注意的地方我都写在注释里了)

(1)最简单的实现方式:

BootstrapDialog.show({
  message: 'Hi Apple!'
});

还有一种更简单的实现方式:BootstrapDialog.alert('I want banana!'); //异步加载 适合用在方法的最后

(2)buttons

BootstrapDialog.show({
  message : "message",
  buttons : [{
    label : "btn1",
    cssClass : "btn-primary"   //给按钮添加类名  可以通过此方式给按钮添加样式
    },{
      label : "btn2",
      icon : "glyphicon glyphicon-ban-circle"   //通过bootstrap的样式添加图标按钮
    },{
      label : "btn3",
      action : function(dialog){   //给当前按钮添加点击事件
        dialog.close();
      }
    }
  ]
});

(3)操作title、message 可以通过 setTitle 和 setMessage 操作title和message

BootstrapDialog.show({
  title : "this is a title!",    //title
  message : "Document Comtent",
  buttons : [{
    label : "cancel",
    action : function(dialog){
      dialog.setTitle("title2");   //操作title
      dialog.setMessage("message1");   //操作message
      dialog.close();
    }
  },{
    label : "Ok",
    action : function(dialog){
      dialog.close();
    }
  }]
})

(4)按钮热键 (本人认为不常用)

BootstrapDialog.show({
  title: 'Button Hotkey',
  message: 'Try to press some keys...',
  onshow: function(dialog) {
    dialog.getButton('button-c').disable();   //通过getButton('id')获得按钮
  },
  buttons: [{
    label: '(A) Button A',
    hotkey: 65, // Keycode of keyup event of key 'A' is 65.
    action: function() {
      alert('Finally, you loved Button A.');
    }
  }, {
    label: '(B) Button B',
    hotkey: 66,
    action: function() {
      alert('Hello, this is Button B!');
    }
  }, {
    id: 'button-c',
    label: '(C) Button C',
    hotkey: 67,
    action: function(){
      alert('This is Button C but you won\'t see me dance.');
    }
  }]
})

(5)动态加载message

BootstrapDialog.show({
  //message : $("<div></div>").load('content.html')   //第一种方式
  message : function(content){    //第二种方式
    var $message = $("<div></div>");
    var loadData = content.getData("contentFile");
    $message.load(loadData);
    return $message;   //一定记得返回值!
  },
  data : {"contentFile" :"content.html"}
});

(6)控制弹出框右上角的关闭按钮

BootstrapDialog.show({
  message: 'Hi Apple!',
  closable: true,    //控制弹出框拉右上角是否显示 ‘x'  默认为true
  buttons: [{
    label: 'Dialog CLOSABLE!',
    cssClass: 'btn-success',
    action: function(dialogRef){
      dialogRef.setClosable(true);
    }
  }, {
    label: 'Dialog UNCLOSABLE!',
    cssClass: 'btn-warning',
    action: function(dialogRef){
      dialogRef.setClosable(false);
    }
  }, {
    label: 'Close the dialog',
    action: function(dialogRef){
      dialogRef.close();   //总是能关闭弹出框
    }
  }]
});

(7) 弹出框的尺寸

BootstrapDialog.show({
  title: 'More dialog sizes',
  message: 'Hi Apple!',
  size : BootstrapDialog.SIZE_NORMAL  //默认尺寸
  buttons: [{
    label: 'Normal',
    action: function(dialog){
      dialog.setTitle('Normal');
      dialog.setSize(BootstrapDialog.SIZE_NORMAL);
    }
  }, {
    label: 'Small',
    action: function(dialog){
      dialog.setTitle('Small');
      dialog.setSize(BootstrapDialog.SIZE_SMALL);
    }
  }, {
    label: 'Wide',
    action: function(dialog){
      dialog.setTitle('Wide');
      dialog.setSize(BootstrapDialog.SIZE_WIDE);
    }
  }, {
    label: 'Large',
    action: function(dialog){
      dialog.setTitle('Large');
      dialog.setSize(BootstrapDialog.SIZE_LARGE);
    }
  }]
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
读JavaScript DOM编程艺术笔记
Nov 15 Javascript
关于jQuery object and DOM element
Apr 15 Javascript
ajax读取数据后使用jqchart显示图表的方法
Jun 10 Javascript
JS中setTimeout的巧妙用法前端函数节流
Mar 24 Javascript
AngularJs自定义服务之实现签名和加密
Aug 02 Javascript
Vue官方文档梳理之全局配置
Nov 22 Javascript
JavaScript引用类型Function实例详解
Aug 09 Javascript
vue根据进入的路由进行原路返回的方法
Sep 26 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
Nov 29 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
Oct 31 Javascript
通过实例了解JS执行上下文运行原理
Jun 17 Javascript
swiperjs实现导航与tab页的联动
Dec 13 Javascript
数组Array的一些方法(总结)
Feb 17 #Javascript
深入理解javascript的getTime()方法
Feb 16 #Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
Feb 16 #Javascript
js时间戳格式化成日期格式的多种方法介绍
Feb 16 #Javascript
基于JavaScript实现拖动滑块效果
Feb 16 #Javascript
js实现移动端微信页面禁止字体放大
Feb 16 #Javascript
100多个基础常用JS函数和语法集合大全
Feb 16 #Javascript
You might like
牡丹941资料
2021/03/01 无线电
php下检测字符串是否是utf8编码的代码
2008/06/28 PHP
PHP 文件缓存的性能测试
2010/04/25 PHP
PHP 透明水印生成代码
2012/08/27 PHP
PHP实现手机号码中间四位用星号(*)隐藏的自定义函数分享
2014/09/27 PHP
PHP处理bmp格式图片的方法分析
2017/07/04 PHP
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
2007/03/27 Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
2012/02/10 Javascript
jQuery提交多个表单的小技巧
2014/07/27 Javascript
JavaScript常用验证函数实例汇总
2014/11/25 Javascript
Node.js中的process.nextTick使用实例
2015/06/25 Javascript
javascript实现数组中的内容随机输出
2015/08/11 Javascript
基于vue.js实现侧边菜单栏
2017/03/20 Javascript
一文让你彻底搞清楚javascript中的require、import与export
2017/09/24 Javascript
vue-cli如何引入bootstrap工具的方法
2017/10/19 Javascript
微信小程序实现下拉刷新和轮播图效果
2017/11/21 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
2018/09/10 Javascript
jQuery实现上下滚动公告栏详细代码
2018/11/21 jQuery
ES6 let和const定义变量与常量的应用实例分析
2019/06/27 Javascript
vue+springboot图片上传和显示的示例代码
2020/02/14 Javascript
[00:09]DOTA2新版本PA至宝特效动作展示
2014/11/19 DOTA
Python使用回溯法子集树模板获取最长公共子序列(LCS)的方法
2017/09/08 Python
使用python和pygame制作挡板弹球游戏
2019/12/03 Python
python中numpy.empty()函数实例讲解
2021/02/05 Python
基于HTML5+tracking.js实现刷脸支付功能
2020/04/16 HTML / CSS
世界上最大的街头服饰网站:Karmaloop
2017/02/04 全球购物
四风问题自查报告剖析材料
2014/02/08 职场文书
《桃林那间小木屋》教学反思
2014/05/01 职场文书
三严三实对照检查材料范文
2014/09/23 职场文书
预备党员群众路线思想汇报2014
2014/10/25 职场文书
小学语文教师年度考核个人总结
2015/02/05 职场文书
2015年学校团委工作总结
2015/05/26 职场文书
高质量“欢迎词”
2019/04/03 职场文书
实体类或对象序列化时,忽略为空属性的操作
2021/06/30 Java/Android
如何设置多台电脑共享打印机?多台电脑共享打印机的方法
2022/04/08 数码科技
Windows7下FTP搭建图文教程
2022/08/05 Servers