20'C 흐림
서울 강남구
Yet another Bootstrap 4 modal wrapper plugin which lets you create beautiful, responsive, dynamic alert/confirm dialog boxes and complex modal windows using Bootstrap 4 modal component.
How to use it:
1. To use the plugin start with loading the latest jQuery library and Bootstrap 4 framework in the document.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
2. Load the JavaScript bootstrap-show-modal.js after jQuery library and we're ready to go.
<script src="src/bootstrap-show-modal.js"></script>
3. The JavaScript to create an alert popup with an OK button.
$.showAlert({
title: "Alert Popup",
body: "This is an alert popup"
})
4. The JavaScript to create a basic modal window.
$.show<a href="https://www.jqueryscript.net/tags.php?/Modal<a>">Modal</a>({
title: "Modal Window",
body: "This is a basic modal window"
})
5. The JavaScript to create a confirmation dialog with confirm/cancel actions.
$.showConfirm({
title: "Confirm Dialog",
body: "Are You Sure",
textTrue: "Okey",
textFalse: "Cancel",
confirmed: function (result) {
if (result) {
// do something
} else {
// do something
}
},
hidden: function () {
// do something
}
})
6. All default options.
{
// modal title
title: "",
// modal body
body: "",
// modal footer
footer: "",
// called after created
created: null,
// called after hidden
hidden: null,
// called after confirmed
// $.showConfirm only
confirmed: null,
// additional CSS class(es)
modalClass: "",
// additional CSS class(es) for ".modal-dialog"
modalDialogClass: "",
// Bootstrap 4 modal's options
options: null
}
HTML, JAVASCRIPT, Create Dynamic Bootstrap 4 Modals In jQuery - bootstrap-show-modal.js