经过js自定义Bootstrap弹出框内容BootstrapDialog

时间 2020-06-22

标签经过自定义 bootstrap 弹出框内 bootstrapdialog 栏目 JavaScript 繁體版

原文原文链接

程序猿喜欢用bootstrap的model弹出框，可是这里会遇到一些麻烦，他们须要写这么一段代码：css

<div class="modal fade">  
  <div class="modal-dialog">  
    <div class="modal-content">  
      <div class="modal-header">  
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>  
        <h4 class="modal-title">Modal title</h4>  
      </div>  
      <div class="modal-body">  
        <p>One fine body…</p>  
      </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><!-- /.modal-content -->  
  </div><!-- /.modal-dialog -->  
</div><!-- /.modal -->

如下操做须要先引入bootstrap.min.css、bootstrap-dialog.min.css、jquery.min.js、bootstrap.min.js、bootstrap-dialog.min.jshtml

程序猿更喜欢的方式是这样：（直接加js，不须要再写像上面的html）jquery

BootstrapDialog.alert('I want banana!');

举例

最简单的：

仅提供消息的展现，其余属性都保持默认。

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

弹出框标题：git

BootstrapDialog.show({ title: 'Say-hello dialog', message: 'Hi Apple!' });

控制标题的变化：github

BootstrapDialog.show({ title: 'Default Title', message: 'Click buttons below.', buttons: [{ label: 'Title 1', action: function(dialog) { dialog.setTitle('Title 1'); } }, { label: 'Title 2', action: function(dialog) { dialog.setTitle('Title 2'); } }] });

控制信息的变化：ajax

BootstrapDialog.show({ title: 'Default Title', message: 'Click buttons below.', buttons: [{ label: 'Message 1', action: function(dialog) { dialog.setMessage('Message 1'); } }, { label: 'Message 2', action: function(dialog) { dialog.setMessage('Message 2'); } }] });

加载远程页面（1）：

这里有一些把远程页面做为消息加载的方法，下面是其中的一种。检出 remote.html

BootstrapDialog.show({ message: $('<div></div>').load('remote.html') });

加载远程页面（2）：

另外一种远程加载页面到BootstrapDialog的方法：这种可定制而且更灵活，可是使用上也有点复杂。

BootstrapDialog.show({ message: function(dialog) { var $message = $('<div></div>'); var pageToLoad = dialog.getData('pageToLoad'); $message.load(pageToLoad); return $message; }, data: { 'pageToLoad': 'remote.html' } });

按钮

BootstrapDialog.show({ message: 'Hi Apple!', buttons: [{ label: 'Button 1' }, { label: 'Button 2', cssClass: 'btn-primary', action: function(){ alert('Hi Orange!'); } }, { icon: 'glyphicon glyphicon-ban-circle', label: 'Button 3', cssClass: 'btn-warning' }, { label: 'Close', action: function(dialogItself){ dialogItself.close(); } }] });

操做按钮

由BootstrapDialog 建立的按钮会提供一些额外的功能：

$button.toggleEnable(true|false);

$button.enable(); // Equals to $button.toggleEnable(true);

$button.disable(); // Equals to $button.toggleEnable(false);

$button.toggleSpin(true|false);

$button.spin(); // Equals to $button.toggleSpin(true);

$button.stopSpin(); // Equals to $button.toggleSpin(false);

BootstrapDialog.show({ title: 'Manipulating Buttons', message: function(dialog) { var $content = $('<div><button class="btn btn-success">Revert button status right now.</button></div>'); var $footerButton = dialog.getButton('btn-1'); $content.find('button').click({$footerButton: $footerButton}, function(event) { event.data.$footerButton.enable(); event.data.$footerButton.stopSpin(); dialog.setClosable(true); }); return $content; }, buttons: [{ id: 'btn-1', label: 'Click to disable and spin.', action: function(dialog) { var $button = this; // 'this' here is a jQuery object that wrapping the <button> DOM element. 
 $button.disable(); $button.spin(); dialog.setClosable(false); } }] });

按钮热键

尝试按下与下面按钮关联的键。最后一个按钮已经被禁用，因此按下是不会有效果的。请注意：若是有些主键须要对键盘进行操做，可能会发生冲突，能够尝试下面的例子：

BootstrapDialog.show({ title: 'Button Hotkey', message: 'Try to press some keys...', onshow: function(dialog) { dialog.getButton('button-c').disable(); }, 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.'); } }] });

热键冲突

尽可能在代码中避免类似点

BootstrapDialog.show({ title: 'Button Hotkey', message: $('<textarea class="form-control" placeholder="Try to input multiple lines here..."></textarea>'), buttons: [{ label: '(Enter) Button A', cssClass: 'btn-primary', hotkey: 13, // Enter. 
                action: function() { alert('You pressed Enter.'); } }] });

打开多个对话框

一个好看的堆叠对话框。请注意第2、第三个对话框是可拖拽的。

var shortContent = '<p>Something here.</p>'; var longContent = ''; for(var i = 1; i <= 200; i++) { longContent += shortContent; } BootstrapDialog.show({ title: 'Another long dialog', message: longContent }); BootstrapDialog.show({ title: 'Another short dialog', message: shortContent, draggable: true }); BootstrapDialog.show({ title: 'A long dialog', message: longContent, draggable: true }); BootstrapDialog.show({ title: 'A short dialog', message: shortContent });

建立弹出框实例：

BootstrapDialog.show(...)只是一个构造方法，若是你须要一个弹出框实例，使用 'new'！

// Using init options 
        var dialogInstance1 = new BootstrapDialog({ title: 'Dialog instance 1', message: 'Hi Apple!' }); dialogInstance1.open(); // Construct by using setters 
        var dialogInstance2 = new BootstrapDialog(); dialogInstance2.setTitle('Dialog instance 2'); dialogInstance2.setMessage('Hi Orange!'); dialogInstance2.setType(BootstrapDialog.TYPE_SUCCESS); dialogInstance2.open(); // Using chain callings 
        var dialogInstance3 = new BootstrapDialog() .setTitle('Dialog instance 3') .setMessage('Hi Everybody!') .setType(BootstrapDialog.TYPE_INFO) .open();

事实上BootstrapDialog.show(...)也会返回一个新建的弹出框实例。bootstrap

// You can use dialogInstance later. 
        var dialogInstance = BootstrapDialog.show({ message: 'Hello Banana!' });

关闭/打开多个弹出框

这个例子演示一次性打开/关闭批处理对话框。由BootstrapDialog建立的弹出框在关闭或销毁以前会在 BootstrapDialog.dialogs容器里面。迭代 BootstrapDialog.dialogs能够找到全部没有被销毁或关闭的弹出框。

var howManyDialogs = 5; for(var i = 1; i <= howManyDialogs; i++) { var dialog = new BootstrapDialog({ title: 'Dialog No.' + i, message: 'Hello Houston, this is dialog No.' + i, buttons: [{ label: 'Close this dialog.', action: function(dialogRef){ dialogRef.close(); } }, { label: 'Close ALL opened dialogs', cssClass: 'btn-warning', action: function(){ // You can also use BootstrapDialog.closeAll() to close all dialogs. 
                        $.each(BootstrapDialog.dialogs, function(id, dialog){ dialog.close(); }); } }] }); dialog.open(); }

有标识符的按钮app

var dialog = new BootstrapDialog({ message: 'Hi Apple!', buttons: [{ id: 'btn-1', label: 'Button 1' }] }); dialog.realize(); var btn1 = dialog.getButton('btn-1'); btn1.click({'name': 'Apple'}, function(event){ alert('Hi, ' + event.data.name); }); dialog.open();

信息类型

改变弹出框类型

var types = [BootstrapDialog.TYPE_DEFAULT, BootstrapDialog.TYPE_INFO, BootstrapDialog.TYPE_PRIMARY, BootstrapDialog.TYPE_SUCCESS, BootstrapDialog.TYPE_WARNING, BootstrapDialog.TYPE_DANGER]; var buttons = []; $.each(types, function(index, type) { buttons.push({ label: type, cssClass: 'btn-default btn-sm', action: function(dialog) { dialog.setType(type); } }); }); BootstrapDialog.show({ title: 'Changing dialog type', message: 'Click buttons below...', buttons: buttons });

更大的弹出框

默认，弹出框的尺寸是 'size-normal' 或者 BootstrapDialog.SIZE_NORMAL ，可是你能够经过设置'尺寸'属性为 'size-large' or BootstrapDialog.SIZE_LARGE。

BootstrapDialog.show({ size: BootstrapDialog.SIZE_LARGE, message: 'Hi Apple!', buttons: [{ label: 'Button 1' }, { label: 'Button 2', cssClass: 'btn-primary', action: function(){ alert('Hi Orange!'); } }, { icon: 'glyphicon glyphicon-ban-circle', label: 'Button 3', cssClass: 'btn-warning' }, { label: 'Close', action: function(dialogItself){ dialogItself.close(); } }] });

更多的弹出框尺寸

请注意：在Bootstrap Modal里面，指定BootstrapDialog.SIZE_WIDE等同于在CSS里面使用 'modal-lg'.

BootstrapDialog.show({ title: 'More dialog sizes', message: 'Hi Apple!', 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); } }] });

丰富的信息

BootstrapDialog 提供丰富的内容展现，因此你甚至能够在弹出框的信息里面使用一个视频剪辑。

var $textAndPic = $('<div></div>'); $textAndPic.append('Who\'s this? <br />'); $textAndPic.append('<img src="./images/pig.ico" />'); BootstrapDialog.show({ title: 'Guess who that is', message: $textAndPic, buttons: [{ label: 'Acky', action: function(dialogRef){ dialogRef.close(); } }, { label: 'Robert', action: function(dialogRef){ dialogRef.close(); } }] });

弹出框的可关闭/不可关闭

若是属性'closable' 设置为false，那么默认的关闭动做就会被禁用，你能够经过dialog.close()关闭弹出框。

BootstrapDialog.show({ message: 'Hi Apple!', closable: false, 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(); } }] });

关于关闭弹出框的其余控制

默认，当属性 'closable' 设置 true ，弹出框能够经过如下方式关闭：单击弹出框之外的区域，按下ESC键，单击弹出窗右上角的关闭图标。若是你但愿弹出框只有只能经过右上角图标关闭，可尝试设置两个变量 'closeByBackdrop' 和'closeByKeyboard' 为 false。

BootstrapDialog.show({ message: 'Hi Apple!', message: 'You can not close this dialog by clicking outside and pressing ESC key.', closable: true, closeByBackdrop: false, closeByKeyboard: false, buttons: [{ label: 'Close the dialog', action: function(dialogRef){ dialogRef.close(); } }] });

禁用动画

设置属性 'animate' 为 false能够禁用打开弹出框时的动画。若是你想禁用全局性的动画，能够这么作：BootstrapDialog.configDefaultOptions({ animate: false });

BootstrapDialog.show({ message: 'There is no fading effects on this dialog.', animate: false, buttons: [{ label: 'Close the dialog', action: function(dialogRef){ dialogRef.close(); } }] });

自动旋转的图标

懒惰的程序猿必定喜欢这样：

BootstrapDialog.show({ message: 'I send ajax request!', buttons: [{ icon: 'glyphicon glyphicon-send', label: 'Send ajax request', cssClass: 'btn-primary', autospin: true, action: function(dialogRef){ dialogRef.enableButtons(false); dialogRef.setClosable(false); dialogRef.getModalBody().html('Dialog closes in 5 seconds.'); setTimeout(function(){ dialogRef.close(); }, 5000); } }, { label: 'Close', action: function(dialogRef){ dialogRef.close(); } }] });

弹出框拖动

当 'draggable'设为true，弹出框能够经过拖拽头部移动。若是你想改变鼠标悬停在对话框头上的光标形状,但是试试下面这行css：

.bootstrap-dialog .modal-header.bootstrap-dialog-draggable { cursor: move; }

控制你的弹出框ide

var dialog = new BootstrapDialog({ message: function(dialogRef){ var $message = $('<div>OK, this dialog has no header and footer, but you can close the dialog using this button: </div>'); var $button = $('<button class="btn btn-primary btn-lg btn-block">Close the dialog</button>'); $button.on('click', {dialogRef: dialogRef}, function(event){ event.data.dialogRef.close(); }); $message.append($button); return $message; }, closable: false }); dialog.realize(); dialog.getModalHeader().hide(); dialog.getModalFooter().hide(); dialog.getModalBody().css('background-color', '#0088cc'); dialog.getModalBody().css('color', '#fff'); dialog.open();

给弹出框添加额外的css

这对特殊的对话框很是有应用效果。例如，若是你想让你的登陆弹出框有一个更小的尺寸，你能够尝试下面的方法：

<style> .login-dialog .modal-dialog { width: 300px;  
            } </style>

BootstrapDialog.show({ title: 'Sign In', message: 'Your sign-in form goes here.', cssClass: 'login-dialog', buttons: [{ label: 'Sign In Now!', cssClass: 'btn-primary', action: function(dialog){ dialog.close(); } }] });

添加一个描述到您的对话框（为可访问性）

给你的弹出框添加一个元素 'aria-describedby' 为读者提升弹出框的描述。

BootstrapDialog.show({ title: 'Add Description', message: 'The description is shown to screen readers.', description: 'This is a Bootstrap Dialog' });

绑定数据函数

var data1 = 'Apple'; var data2 = 'Orange'; var data3 = ['Banana', 'Pear']; BootstrapDialog.show({ message: 'Hi Apple!', data: { 'data1': data1, 'data2': data2, 'data3': data3 }, buttons: [{ label: 'See what you got', cssClass: 'btn-primary', action: function(dialogRef){ alert(dialogRef.getData('data1')); alert(dialogRef.getData('data2')); alert(dialogRef.getData('data3').join(', ')); } }] });

弹出框事件

请注意：若是你是使用setters配置事件程序，应使用dialog.onShow(function) 和 dialog.onHide(function).

BootstrapDialog.show({ message: 'Hello world!', onshow: function(dialogRef){ alert('Dialog is popping up, its message is ' + dialogRef.getMessage()); }, onshown: function(dialogRef){ alert('Dialog is popped up.'); }, onhide: function(dialogRef){ alert('Dialog is popping down, its message is ' + dialogRef.getMessage()); }, onhidden: function(dialogRef){ alert('Dialog is popped down.'); } });

阻止弹出框关闭

属性 'onhide' 给你一次机会为某些条件阻止弹出框关闭。设置 'onhide' 的回调方法返回false能够阻止弹出框关闭。在下面的例子，只有当你输入你最喜欢的水果是 'banana'才会关闭弹出框。

BootstrapDialog.show({ message: 'Your most favorite fruit: <input type="text" class="form-control">', onhide: function(dialogRef){ var fruit = dialogRef.getModalBody().find('input').val(); if($.trim(fruit.toLowerCase()) !== 'banana') { alert('Need banana!'); return false; } }, buttons: [{ label: 'Close', action: function(dialogRef) { dialogRef.close(); } }] });

更多的快捷方法

alert

BootstrapDialog.alert('Hi Apple!');

Alert添加回调函数

BootstrapDialog.alert('Hi Apple!', function(){ alert('Hi Orange!'); });

自定义弹出框的类型、标题和其余的属性

下面所示的全部选项都是可选的

BootstrapDialog.alert({ title: 'WARNING', message: 'Warning! No Banana!', type: BootstrapDialog.TYPE_WARNING, // <-- Default value is BootstrapDialog.TYPE_PRIMARY 
            closable: true, // <-- Default value is false 
            draggable: true, // <-- Default value is false 
            buttonLabel: 'Roar! Why!', // <-- Default value is 'OK', 
            callback: function(result) { // result will be true if button was click, while it will be false if users close the dialog directly. 
                alert('Result is: ' + result); } });

确认

BootstrapDialog.confirm('Hi Apple, are you sure?');

确认的回调函数

BootstrapDialog.confirm('Hi Apple, are you sure?', function(result){ if(result) { alert('Yup.'); }else { alert('Nope.'); } });

就像咱们在alert里面作的同样，咱们能够更多的控制确认弹出框

BootstrapDialog.confirm({ title: 'WARNING', message: 'Warning! Drop your banana?', type: BootstrapDialog.TYPE_WARNING, // <-- Default value is BootstrapDialog.TYPE_PRIMARY 
            closable: true, // <-- Default value is false 
            draggable: true, // <-- Default value is false 
            btnCancelLabel: 'Do not drop it!', // <-- Default value is 'Cancel', 
            btnOKLabel: 'Drop it!', // <-- Default value is 'OK', 
            btnOKClass: 'btn-warning', // <-- If you didn't specify it, dialog type will be used, 
            callback: function(result) { // result will be true if button was click, while it will be false if users close the dialog directly. 
                if(result) { alert('Yup.'); }else { alert('Nope.'); } } });

I18N

为了提供你须要的本地信息，在使用BootstrapDialog以前重置一下信息

BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_DEFAULT] = 'Information'; BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_INFO] = 'Information'; BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_PRIMARY] = 'Information'; BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_SUCCESS] = 'Success'; BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_WARNING] = 'Warning'; BootstrapDialog.DEFAULT_TEXTS[BootstrapDialog.TYPE_DANGER] = 'Danger'; BootstrapDialog.DEFAULT_TEXTS['OK'] = 'OK'; BootstrapDialog.DEFAULT_TEXTS['CANCEL'] = 'Cancel'; BootstrapDialog.DEFAULT_TEXTS['CONFIRM'] = 'Confirmation';

具体属性及方法请查看原始官网： http://nakupanda.github.io/bootstrap3-dialog/

若有异议：请查看原始官网： http://nakupanda.github.io/bootstrap3-dialog/

转自： http://blog.csdn.net/shenya2/article/details/53066577