Date: 2018jun15
Language: javaScript
Q. Bootstrap4: Example modal dialog
A.
function confirmDeletePage(relpath) {
const dlg = bsPrepModalDiv('my_unique_id');
dlg.find('.modal-body').html('Loading...');
$.get('<my-url>', function(data) {
dlg.find('.modal-body').html(data);
});
dlg.find('.modal-title').html('My Title');
dlg.find('.modal-footer').html(bsGenericFooter());
dlg.find('#ok-button').click(function() {
// User pressed, OK, do something
dlg.modal('hide');
});
dlg.modal('show');
}
Helper functions
function bsEnsureModalDiv(id) {
var dlg = $('#' + id);
if ($('#' + id).length == 0) {
$(document.body).append('<div id="' + id + '" data-backdrop="static" data-keyboard="false"></div>');
dlg = $('#' + id);
}
else {
dlg.html('');
}
return dlg;
}
function bsModalHtml4(sizeClass) {
return '<div class="modal-dialog ' + sizeClass + '" role="document">' +
'<div class="modal-content">' +
'<div class="modal-header">' +
'<h5 class="modal-title"></h5>' +
'<button type="button" class="close" data-dismiss="modal" aria-label="Close">' +
'<span aria-hidden="true">×</span>' +
'</button>' +
'</div>' +
'<div class="modal-body">' +
'</div>' +
'<div class="modal-footer">' +
'<button type="button" class="btn btn-primary">Save changes</button>' +
'<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>' +
'</div>' +
'</div>' +
'</div>';
}
function bsGenericFooter() {
return "<button type='button' id='ok-button' class='btn btn-default'>OK</button>" +
"<button type='button' id='cancel-button' class='btn' data-dismiss='modal'>Cancel</button>";
}
function bsPrepModalDiv(id) {
var dlg = bsEnsureModalDiv(id);
dlg.addClass('modal fade');
dlg.attr('role', 'dialog');
dlg.html(bsModalHtml4('modal-lg'));
return dlg;
}