Browse - Programming Tips - Example modal dialog with Bootstrap 4

Date: 2018jun15
Language: javaScript

Q.  Example modal dialog with Bootstrap 4

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() { // Use 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">&times;</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; }