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之锁定表格栏位
Jun 29 Javascript
JQuery实现倒计时按钮具体方法
Nov 14 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
Apr 04 Javascript
Javascript遍历table中的元素示例代码
Jul 08 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
Aug 12 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
Dec 29 Javascript
jquery插件NProgress.js制作网页加载进度条
Jun 05 Javascript
jQuery xml字符串的解析、读取及查找方法
Mar 01 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
May 16 Javascript
js动态获取子复选项并设计全选及提交的实现方法
Jun 24 Javascript
详解VueJS 数据驱动和依赖追踪分析
Jul 26 Javascript
iview Upload组件多个文件上传的示例代码
Sep 30 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
提高PHP性能的编码技巧以及性能优化详细解析
2013/08/24 PHP
php实现通用的从数据库表读取数据到数组的函数实例
2015/03/21 PHP
Yii框架实现的验证码、登录及退出功能示例
2017/05/20 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
Ecshop 后台添加新功能栏目及管理权限设置教程
2017/11/21 PHP
PHPstorm启用自动换行的方法详解(IDE)
2020/09/17 PHP
动态加载js文件 document.createElement
2006/10/14 Javascript
jquery last-child 列表最后一项的样式
2010/01/22 Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
2012/12/12 Javascript
查询json的数据结构的8种方式简介
2014/03/10 Javascript
jquery 扑捉回车键事件代码
2014/04/24 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
Jquery之Bind方法参数传递与接收的三种方法
2014/06/24 Javascript
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
jQuery事件用法实例汇总
2014/08/29 Javascript
javascript实现简单的省市区三级联动
2015/05/14 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
2017/11/15 Javascript
关于微信小程序登录的那些事
2019/01/08 Javascript
对layui中table组件工具栏的使用详解
2019/09/19 Javascript
vue图片上传组件使用详解
2019/12/23 Javascript
基于Vue实现微前端的示例代码
2020/04/24 Javascript
[02:04]完美世界城市挑战赛秋季赛报名开始 谁是solo路人王?
2019/10/10 DOTA
[00:37]食人魔魔法师轮盘吉兆顺应全新至宝将拥有额外款式
2019/12/19 DOTA
Python使用matplotlib的pie函数绘制饼状图功能示例
2018/01/08 Python
python实现Decorator模式实例代码
2018/02/09 Python
Django自定义manage命令实例代码
2018/02/11 Python
python 用正则表达式筛选文本信息的实例
2018/06/05 Python
django之静态文件 django 2.0 在网页中显示图片的例子
2019/07/28 Python
CSS的background属性及CSS3的背景图片设置总结
2016/06/13 HTML / CSS
html5利用canvas绘画二级树形结构图的示例
2017/09/27 HTML / CSS
JDK安装目录下有哪些内容
2014/08/25 面试题
实习生的自我鉴定范文欣赏
2013/11/20 职场文书
班组长安全生产职责
2013/12/16 职场文书
总会计师岗位职责
2014/02/19 职场文书
先进班组事迹材料
2014/12/25 职场文书
教师自荐信范文
2015/03/06 职场文书