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 相关文章推荐
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
May 24 Javascript
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
Jul 31 Javascript
Jquery获取元素的父容器对象示例代码
Feb 10 Javascript
一款由jquery实现的整屏切换特效
Sep 15 Javascript
jQuery实现瀑布流布局
Dec 12 Javascript
Webwork 实现文件上传下载代码详解
Feb 02 Javascript
Javascript从数组中随机取出不同元素的两种方法
Sep 22 Javascript
javascript 定时器工作原理分析
Dec 03 Javascript
微信小程序 登录实例详解
Jan 16 Javascript
COM组件中调用JavaScript函数详解及实例
Feb 23 Javascript
js图片延迟加载(Lazyload)三种实现方式
Mar 01 Javascript
详解Vue.js使用Swiper.js在iOS
Sep 10 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
thinkPHP自定义类实现方法详解
2016/11/30 PHP
php安装dblib扩展,连接mssql的具体步骤
2017/03/02 PHP
点图片上一页下一页翻页效果
2008/07/09 Javascript
javascript 在网页中的运用(asp.net)
2009/11/23 Javascript
ASP.NET中AJAX 调用实例代码
2012/05/03 Javascript
jquery清空textarea等输入框实现代码
2013/04/22 Javascript
js和jquery中循环的退出和继续下一个循环
2014/09/03 Javascript
nodejs实现HTTPS发起POST请求
2015/04/23 NodeJs
原生js实现autocomplete插件
2016/04/14 Javascript
html+js+highcharts绘制圆饼图表的简单实例
2016/08/04 Javascript
jQuery设置Easyui校验规则(推荐)
2016/11/21 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
2017/06/08 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
2017/09/07 Javascript
探讨Vue.js的组件和模板
2017/10/27 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
2018/12/28 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
2019/11/14 Javascript
vue实现简单计算商品价格
2020/09/14 Javascript
python实现JAVA源代码从ANSI到UTF-8的批量转换方法
2015/08/10 Python
深入解析Python中的集合类型操作符
2015/08/19 Python
Python使用微信SDK实现的微信支付功能示例
2017/06/30 Python
python中使用psutil查看内存占用的情况
2018/06/11 Python
Opencv-Python图像透视变换cv2.warpPerspective的示例
2019/04/11 Python
python IDLE 背景以及字体大小的修改方法
2019/07/12 Python
python函数参数(必须参数、可变参数、关键字参数)
2019/08/16 Python
Django分组聚合查询实例分享
2020/04/29 Python
4款Python 类型检查工具,你选择哪个呢?
2020/10/30 Python
美国设计师精美珠宝购物网:Netaya
2016/08/28 全球购物
IdealFit官方网站:女性蛋白质、补充剂和运动服装
2019/03/24 全球购物
应届大学生的推荐信
2013/11/20 职场文书
学生打架检讨书1000字
2014/01/16 职场文书
施工安全标语
2014/06/07 职场文书
预备党员转正思想汇报
2014/09/26 职场文书
教育教学工作反思
2016/02/24 职场文书
求职信如何撰写?
2019/05/22 职场文书
mybatis 解决从列名到属性名的自动映射失败问题
2021/06/30 Java/Android
python3中apply函数和lambda函数的使用详解
2022/02/28 Python