bootstrap-alert-modal

Bootstrap alert and confirm messages using the modal component

Requirements

• Bootstrap v3+
• jQuery v2+

Install

npm i bootstrap-alert-modal

Quick 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 window
• body {string} required - Any html-content
• code {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 window
• body {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 window
• body {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 window
• body {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 window
• body {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-content
• confirmButtonText {string} required - The text of the button "OK"
• cancelButtonText {string} required - The text of the button "Cancel
• callbackConfirm {function} - Function run after pressing a button "OK"
• callbackCancel {function} - Function run after pressing a button "Cancel
• callbackOnOpen {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);