1.1.0 • Published 6 years ago
bootstrap-alert-modal v1.1.0
bootstrap-alert-modal
Bootstrap alert and confirm messages using the modal component
Requirements
- Bootstrap v3+
- jQuery v2+
Install
npm i bootstrap-alert-modalQuick start
<!-- Style -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- Code -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="dist/bootstrap-alert-modal.min.js"></script>
<script>
$(function () {
bsam.alert('Example', '<p>Any <strong>html</strong>-content</p>', 'success');
});
</script>Options
// Default
bsam.config = {
alertCloseButtonClass : 'btn-primary',
alertCloseButtonText : 'Close',
confirmHeaderClass : 'text-white bg-warning',
confirmTitle : 'Action required',
confirmConfirmButtonClass: 'btn-success',
confirmCancelButtonClass : 'btn-danger',
modalBackdrop : 'static',
modalKeyboard : false,
modalFocus : true
};
// Override
bsam.config.alertCloseButtonText = 'Close now!';| Option | Type | Default |
|---|---|---|
| alertCloseButtonClass | string | 'btn-primary' |
| alertCloseButtonText | string | 'Close' |
| confirmHeaderClass | string | 'text-white bg-warning' |
| confirmTitle | string | 'Action required' |
| confirmConfirmButtonClass | string | 'btn-success' |
| confirmCancelButtonClass | string | 'btn-danger' |
| modalBackdrop | string | 'static' |
| modalKeyboard | boolean | false |
| modalFocus | boolean | true |
Methods
bsam.alert(title, body, code)

Alert modal window with one close button
title{string} required - Title modal windowbody{string} required - Any html-contentcode{string} required - Bootstrap background class suffix (primary, success, danger and etc)
bsam.success(title, body)

Fast facade alert modal window with one close button and predefined background code
title{string} required - Title modal windowbody{string} required - Any html-content
bsam.danger(title, body)

Fast facade alert modal window with one close button and predefined background code
title{string} required - Title modal windowbody{string} required - Any html-content
bsam.warning(title, body)

Fast facade alert modal window with one close button and predefined background code
title{string} required - Title modal windowbody{string} required - Any html-content
bsam.info(title, body)

Fast facade alert modal window with one close button and predefined background code
title{string} required - Title modal windowbody{string} required - Any html-content
bsam.confirm(body, confirmButtonText, cancelButtonText, callbackConfirm, callbackCancel, callbackOnOpen)

Confirm modal window with two buttons and callbacks
body{string} required - Any html-contentconfirmButtonText{string} required - The text of the button "OK"cancelButtonText{string} required - The text of the button "CancelcallbackConfirm{function} - Function run after pressing a button "OK"callbackCancel{function} - Function run after pressing a button "CancelcallbackOnOpen{function} - Function run after show modal
var body = '<p>Any <strong>html</strong>-content</p>';
var confirmButtonText = 'OK';
var cancelButtonText = 'Cancel';
var callbackConfirm = function() {
bsam.success('Success', 'Successed');
};
var callbackCancel = function() {
bsam.danger('Cancel', 'Canceled');
};
var callbackOnOpen = function() {
bsam.info('Open', 'Opened');
};
bsam.confirm(body, confirmButtonText, cancelButtonText, callbackConfirm, callbackCancel, callbackOnOpen);