Alerts and Prompts

The Popup control can be used to implement static methods for showing alert and prompt dialogs. This sample lets you configure the Popup content and modify the style also.

Learn about Input Controls | Popup API Reference

import 'bootstrap.css'; import '@mescius/wijmo.styles/wijmo.css'; import './styles.css'; // import * as input from '@mescius/wijmo.input'; import * as wijmo from '@mescius/wijmo'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // create form let cmbType = new input.ComboBox('#type', { textChanged: (sender) => { document.querySelector('#btnShow').textContent = 'Show ' + sender.text; }, itemsSource: ['Alert', 'Prompt'] }), header = new input.ComboBox('#header', { text: 'Header' }), body = new input.ComboBox('#body', { text: 'Dialog message.' }), ok = new input.ComboBox('#ok', { text: 'OK' }), cancel = new input.ComboBox('#cancel', { text: 'Cancel' }), clsDialog = new input.ComboBox('#clsDialog', { text: 'modal-dialog' }), clsHeader = new input.ComboBox('#clsHeader', { text: 'modal-header' }), clsBody = new input.ComboBox('#clsBody', { text: 'modal-body' }), clsInput = new input.ComboBox('#clsInput', { text: 'form-control' }), clsFooter = new input.ComboBox('#clsFooter', { text: 'modal-footer' }), clsOK = new input.ComboBox('#clsOK', { text: 'btn btn-primary' }), clsCancel = new input.ComboBox('#clsCancel', { text: 'btn btn-default' }), small = document.querySelector('#small'); // // show the Alert/Prompt document.querySelector('#btnShow').addEventListener('click', () => { let options = getOptions(); // if (cmbType.text == 'Alert') { alertPopup(options, result => alert('you entered: ' + result)); } else { propmtPopup(options, result => alert('you entered: ' + result)); } }); // function getOptions() { return { header: header.text, body: body.text, small: small.checked, ok: ok.text || 'OK', cancel: cancel.text || 'Cancel', clsDialog: clsDialog.text || 'wj-dialog', clsHeader: clsHeader.text || 'wj-dialog-header', clsBody: clsBody.text || 'wj-dialog-body', clsInput: clsInput.text || 'wj-control', clsFooter: clsFooter.text || 'wj-dialog-footer', clsOK: clsOK.text || 'wj-btn', clsCancel: clsCancel.text || 'wj-btn' }; } // // alert popup function alertPopup(options, callback) { let dialog = createDialog(options), popup = new input.Popup(dialog); // popup.show(true, (sender) => { if (callback) { callback(sender.dialogResult); } }); } // // prompt popup function propmtPopup(options, callback) { let dialog = createDialog(options, true), popup = new input.Popup(dialog); // popup.show(true, (sender) => { if (callback) { let result = sender.dialogResult && sender.dialogResult.indexOf('ok') > -1 ? dialog.querySelector('input').value : null; callback(result); } }); } // // create dialog to use as an alert or prompt function createDialog(options, input = false) { // create dialog let template = '<div class="{clsDialog}" role="dialog">' + '<div class="{clsHeader}">' + '<h4>{header}</h4>' + '</div>' + '<div class="{clsBody}">' + '<p>{body}</p>' + (input ? '<input class="{clsInput}">' : '') + '</div>' + '<div class="{clsFooter}">' + '<button class="{clsOK} wj-hide-ok">{ok}</button>' + '<button class="{clsCancel} wj-hide">{cancel}</button>' + '</div>' + '</div>'; // let dialog = wijmo.createElement(wijmo.format(template, options)); // // honor 'small' option dialog.style.width = options.small ? '20%' : '40%'; // // dialog is ready return dialog; } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>MESCIUS Wijmo Popup Alerts and Prompts</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.21.5/system.src.js" integrity="sha512-skZbMyvYdNoZfLmiGn5ii6KmklM82rYX2uWctBhzaXPxJgiv4XBwJnFGr5k8s+6tE1pcR1nuTKghozJHyzMcoA==" crossorigin="anonymous"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <div class="form-group"> <label for="btnShow">Show</label> <button id="btnShow" class="btn btn-primary">Show Popup</button> </div> <div class="row"> <div class="col-xs-6"> <!-- important options --> <div class="form-group"> <label for="type">Type</label> <div id="type"></div> </div> <div class="form-group"> <label for="header">Header</label> <input id="header"> </div> <div class="form-group"> <label for="body">Body</label> <input id="body"> </div> <div class="form-group"> <label for="small">Small</label> <input id="small" type="checkbox"> </div> <div class="form-group"> <label for="ok">OK Text</label> <input id="ok"> </div> <div class="form-group"> <label for="cancel">Cancel Text</label> <input id="cancel"> </div> </div> <div class="col-xs-6"> <!-- details --> <div class="form-group"> <label for="clsDialog">Dialog Class</label> <input id="clsDialog"> </div> <div class="form-group"> <label for="clsHeader">Header Class</label> <input id="clsHeader"> </div> <div class="form-group"> <label for="clsBody">Body Class</label> <input id="clsBody"> </div> <div class="form-group"> <label for="clsInput">Input Class</label> <input id="clsInput"> </div> <div class="form-group"> <label for="clsFooter">Footer Class</label> <input id="clsFooter"> </div> <div class="form-group"> <label for="clsOK">OK Class</label> <input id="clsOK"> </div> <div class="form-group"> <label for="clsCancel">Cancel Class</label> <input id="clsCancel"> </div> </div> </div> </div> </body> </html>
label { width: 90px; text-align: right; margin-right: 6px; } .wj-combobox { width: 140px; } body { margin-bottom: 24pt; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'jszip': 'npm:jszip/dist/jszip.js', '@mescius/wijmo': 'npm:@mescius/wijmo/index.js', '@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js', '@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles', '@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures', '@mescius/wijmo.chart': 'npm:@mescius/wijmo.chart/index.js', '@mescius/wijmo.chart.analytics': 'npm:@mescius/wijmo.chart.analytics/index.js', '@mescius/wijmo.chart.animation': 'npm:@mescius/wijmo.chart.animation/index.js', '@mescius/wijmo.chart.annotation': 'npm:@mescius/wijmo.chart.annotation/index.js', '@mescius/wijmo.chart.finance': 'npm:@mescius/wijmo.chart.finance/index.js', '@mescius/wijmo.chart.finance.analytics': 'npm:@mescius/wijmo.chart.finance.analytics/index.js', '@mescius/wijmo.chart.hierarchical': 'npm:@mescius/wijmo.chart.hierarchical/index.js', '@mescius/wijmo.chart.interaction': 'npm:@mescius/wijmo.chart.interaction/index.js', '@mescius/wijmo.chart.radar': 'npm:@mescius/wijmo.chart.radar/index.js', '@mescius/wijmo.chart.render': 'npm:@mescius/wijmo.chart.render/index.js', '@mescius/wijmo.chart.webgl': 'npm:@mescius/wijmo.chart.webgl/index.js', '@mescius/wijmo.chart.map': 'npm:@mescius/wijmo.chart.map/index.js', '@mescius/wijmo.gauge': 'npm:@mescius/wijmo.gauge/index.js', '@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js', '@mescius/wijmo.grid.detail': 'npm:@mescius/wijmo.grid.detail/index.js', '@mescius/wijmo.grid.filter': 'npm:@mescius/wijmo.grid.filter/index.js', '@mescius/wijmo.grid.search': 'npm:@mescius/wijmo.grid.search/index.js', '@mescius/wijmo.grid.grouppanel': 'npm:@mescius/wijmo.grid.grouppanel/index.js', '@mescius/wijmo.grid.multirow': 'npm:@mescius/wijmo.grid.multirow/index.js', '@mescius/wijmo.grid.transposed': 'npm:@mescius/wijmo.grid.transposed/index.js', '@mescius/wijmo.grid.transposedmultirow': 'npm:@mescius/wijmo.grid.transposedmultirow/index.js', '@mescius/wijmo.grid.pdf': 'npm:@mescius/wijmo.grid.pdf/index.js', '@mescius/wijmo.grid.sheet': 'npm:@mescius/wijmo.grid.sheet/index.js', '@mescius/wijmo.grid.xlsx': 'npm:@mescius/wijmo.grid.xlsx/index.js', '@mescius/wijmo.grid.selector': 'npm:@mescius/wijmo.grid.selector/index.js', '@mescius/wijmo.grid.cellmaker': 'npm:@mescius/wijmo.grid.cellmaker/index.js', '@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js', '@mescius/wijmo.odata': 'npm:@mescius/wijmo.odata/index.js', '@mescius/wijmo.olap': 'npm:@mescius/wijmo.olap/index.js', '@mescius/wijmo.rest': 'npm:@mescius/wijmo.rest/index.js', '@mescius/wijmo.pdf': 'npm:@mescius/wijmo.pdf/index.js', '@mescius/wijmo.pdf.security': 'npm:@mescius/wijmo.pdf.security/index.js', '@mescius/wijmo.viewer': 'npm:@mescius/wijmo.viewer/index.js', '@mescius/wijmo.xlsx': 'npm:@mescius/wijmo.xlsx/index.js', '@mescius/wijmo.undo': 'npm:@mescius/wijmo.undo/index.js', '@mescius/wijmo.interop.grid': 'npm:@mescius/wijmo.interop.grid/index.js', '@mescius/wijmo.touch': 'npm:@mescius/wijmo.touch/index.js', '@mescius/wijmo.cloud': 'npm:@mescius/wijmo.cloud/index.js', '@mescius/wijmo.barcode': 'npm:@mescius/wijmo.barcode/index.js', '@mescius/wijmo.barcode.common': 'npm:@mescius/wijmo.barcode.common/index.js', '@mescius/wijmo.barcode.composite': 'npm:@mescius/wijmo.barcode.composite/index.js', '@mescius/wijmo.barcode.specialized': 'npm:@mescius/wijmo.barcode.specialized/index.js', 'jszip': 'npm:jszip/dist/jszip.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);