Browse - Programming Tips - jQueryUI: Example modal dialog

Date: 2019oct28
Language: javaScript

Q.  jQueryUI: Example modal dialog

A.

function exampleDlg() { const dlg = prepModalDiv('my_unique_id'); dlg.html('Loading...'); $.get('<my-url>', function(data) { dlg.html(data); }); const buttons = [ btn('OK', function() { /* Do something */ dlg.dialog('close'); }), btn('Cancel', function() { dlg.dialog('close'); }), ]; dlg.dialog({ width: '55%', height: '300', title: 'My Dialog', modal: true, autoOpen: true, closeOnEscape: false, buttons: buttons }); };
Helper functions
function prepDialogDiv(id) { var dlg = $('#' + id); if (dlg.length == 0) { $(document.body).append('<div id=' + id + '></div>'); dlg = $('#' + id); } else { dlg.html(''); } return dlg; } function btn(text, click) { return { text: text, click: click }; }