频道导航

Bootstrap BootstrapDialog使用详解

2019-01-07 Bootstrap 前端之家

前端之家收集整理的这篇文章主要介绍了Bootstrap BootstrapDialog使用详解，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

这里有两种展现方式

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

1、通过HTML代码 显示

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo 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">×
<h4 class="modal-title" id="myModalLabel">Modal title

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

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

（1）最简单的实现方式：

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

（2）buttons

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

（3）操作title、message 可以通过 setTitle 和 setMessage 操作title和message

（4）按钮热键（本人认为不常用）

（5）动态加载message

").load('content.html') //第一种方式 message : function(content){ //第二种方式 var $message = $("

"); var loadData = content.getData("contentFile"); $message.load(loadData); return $message; //一定记得返回值！ },data : {"contentFile" :"content.html"} });

（6）控制弹出框右上角的关闭按钮

显示 ‘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