Bootstrap alert and confirm messages using the modal component
- Bootstrap v3+
- jQuery v2+
npm i bootstrap-alert-modal
<!-- 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>
// 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 |
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)
Fast facade alert modal window with one close button and predefined background code
title
{string} required - Title modal windowbody
{string} required - Any html-content
Fast facade alert modal window with one close button and predefined background code
title
{string} required - Title modal windowbody
{string} required - Any html-content
Fast facade alert modal window with one close button and predefined background code
title
{string} required - Title modal windowbody
{string} required - Any html-content
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);