simple-bs-dialog.js是一款bootstrap 4模态窗口增强插件。通过该插件,使用bootstrap4模态窗口会更加简单方便,功能更强大。
使用方法
在HTML文件中引入。
初始化插件
创建一个基本的模态窗口。
SimpleBsDialog.show({ title: 'Modal Title', html: 'Modal Content Here' });
带Loading的模态窗口。
SimpleBsDialog.show({ title: 'Modal Title', spinner: true, spinnerIcon: '', onShown: function(dialogRef) { setTimeout(function() { dialogRef.set({ 'spinner': false, }).getModalBody().html('Your content goes here...'); dialogRef.getButtons().prop('disabled', false); }, 1000); } });
自定义确定和取消按钮。
SimpleBsDialog.show({ buttons: [{ id: 'btn-ok', label: 'OK', cssClass: 'btn-primary', action: function(dialogRef) { console.log('OK button pressed!'); dialogRef.close(); }, },{ id: 'btn-cancel', label: 'Cancel', cssClass: 'btn-warning', action: function(dialogRef) { console.log('Cancel button pressed!'); dialogRef.close(); }, }] });
配置参数
所有可用的配置项。
SimpleBsDialog.show({ id: newGuid(), width: 500, autoWidth: false, height: 280, autoHeight: false, title: '', closable: true, spinner: false, spinnerIcon: '', closeByBackdrop: true, closeByKeyboard: true, html: '', cssClass: '', // extra CSS class(es) buttons: [], });
API
回调函数。
SimpleBsDialog.show({ onShow: function(dialogRef){}, onShown: function(dialogRef){}, onHide: function(dialogRef){}, onHidden: function(dialogRef){} });
可用方法。
open(): Opens the modal. close(): Closes the modal. get(option): Getter for options. set(option, value): Setter for a given option. set(options): Setter for many options. getModalBody(): Returns the raw modal body. getButton(id): Returns a button by id as a jQuery object. getButtons(): Returns all available buttons as jQuery objects. SimpleBsDialog.version: Returns the current SimpleBsDialog's version.
imple-bs-dialog.js bootstrap 4模态窗口增强插件的github网址为:https://github.com/wraplr/simple-bs-dialog
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!