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/Jquery——简单定时器的多种实现方法
Jul 03 Javascript
Knockout自定义绑定创建方法
Dec 26 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
Jun 08 Javascript
JS实现的表头列头固定页面功能示例
Jan 10 Javascript
Javascript中return的使用与闭包详解
Jan 11 Javascript
jQuery弹出窗口简单实现代码
Mar 09 Javascript
使用vue2实现购物车和地址选配功能
Mar 29 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
Dec 12 Javascript
使用pm2自动化部署node项目的方法步骤
Jan 28 Javascript
一些可能会用到的Node.js面试题
Jun 15 Javascript
Vue data的数据响应式到底是如何实现的
Feb 11 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结合ACCESS的跨库查询功能
2015/06/12 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
PHP超全局变量实现原理及代码解析
2020/09/01 PHP
JQuery之拖拽插件实现代码
2011/04/14 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
2011/11/14 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
jQuery中index()的用法分析
2014/09/05 Javascript
简述jQuery ajax的执行顺序
2016/01/05 Javascript
jQuery zTree加载树形菜单功能
2016/02/25 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
2016/06/13 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
2016/11/16 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
2016/12/22 Javascript
node.js实现登录注册页面
2017/04/08 Javascript
vue项目关闭eslint校验
2018/03/21 Javascript
详解webpack 入门与解析
2018/04/09 Javascript
Vue写一个简单的倒计时按钮功能
2018/04/20 Javascript
Node.js使用cookie保持登录的方法
2018/05/11 Javascript
[05:40]DOTA2荣耀之路6:Wings最后进攻
2018/05/30 DOTA
[03:13]DOTA2-DPC中国联赛1月25日Recap集锦
2021/03/11 DOTA
Python中的Descriptor描述符学习教程
2016/06/02 Python
浅析Python中的多条件排序实现
2016/06/07 Python
Python 3.x 判断 dict 是否包含某键值的实例讲解
2018/07/06 Python
Python语法分析之字符串格式化
2019/06/13 Python
python按行读取文件并找出其中指定字符串
2019/08/08 Python
python将音频进行变速的操作方法
2020/04/08 Python
python实现ping命令小程序
2020/12/28 Python
html5使用canvas绘制太阳系效果
2014/12/15 HTML / CSS
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
世界上最受欢迎的花店:1-800-Flowers.com
2020/06/01 全球购物
法院实习人员自我鉴定
2013/09/26 职场文书
好矿嫂事迹材料
2014/01/21 职场文书
寒假实习自荐信
2014/01/26 职场文书
致800米运动员广播稿
2014/02/16 职场文书
老公爱的承诺书
2014/03/31 职场文书
2014乡镇干部纪律作风整顿思想汇报
2014/09/13 职场文书
国际政治学专业推荐信
2014/09/26 职场文书