spDialog
Basic Alert Basic Confirm Confirm with Cancel Custom Body Alert Custom Dialog Design Github Discussions

spDialog

Basic Alert | Basic Confirm | Confirm with Cancel | Custom Body Alert | Custom Dialog Design
Github | Discussions

spDialog Samples

This page contains several examples of how to use spDialog. If you don't see an example that fits your needs, head on over to Discussions on Github and let us know what you're looking for.
Some quick details about these examples:
  • spDialog assume you already know how to use JavaScript and HTML
  • Each example utilizes a Response area just below the button for the example to display any detail resulting from pressing said button
  • The ProcessResponse() function listed in the examples is strictly for these examples to display results in the Response area
  • Most everything in spDialog is customizable, see the Parameters section of the ReadMe file for a full list of options.

Basic Alert

This example shows how to display a basic alert dialog with an OK button. It will launch the dialog and output the timestamp when the user opened the dialog and then once a response is received it will output that response as well to the Response container below.
We accomplish this by utilizing an OnOpen callback to print the timestamp and by showing the dialog with an async await call in order to wait for a user response using a promise. The use of the timestamps is strictly to show you that the dialog is indeed waiting on the user to respond.
The only valid response from an Alert style dialog is a value of 1

Response

Code

let dlgBasicAlert = null;

function init()
{
        let dlgBasicAlertParams = {
        textTitle: 'Example: Alert Replacement',
        textBody: `<div style='margin-bottom: 5px'>This is an example of a simple alert() replacement dialog.</div><div><span style='font-weight: bold'>NOTE:</span> textBody can contain HTML.</div>`,
        showAnswerCancel: false,
        showAnswerFalse: false,
        dialogWidth: '375px',
        dialogHeight: '175px',
        dialogFontSize: '.85rem',
        dialogAnimate: true,
        onOpen: () => {ProcessOpen(document.getElementById('ex-basic-alert-response'));}
    }

    dlgBasicAlert = new spDialog(dlgBasicAlertParams);
}

async function ShowBasicAlert()
{
    await dlgBasicAlert.ShowDialog().then(result => {ProcessResponse(document.getElementById('ex-basic-alert-response'), dlgBasicAlert.userResponse)});
}
Note that the ProcessOpen() and ProcessResponse() functions in the code block are specific to this page. You'd want to provide your own custom functions to process user input.
Back to top

Basic Confirm

This example shows how to display a basic confirm dialog with a Yes and No button. It will launch the dialog and output the timestamp when the user opened the dialog and then once a response is received it will output that response as well to the Response container below.
We accomplish this by utilizing an OnOpen callback to print the timestamp and by showing the dialog with an async await call in order to wait for a user response using a promise. The use of the timestamps is strictly to show you that the dialog is indeed waiting on the user to respond.

Response

Code

let dlgBasicConfirm = null;
   
function init()
{
    let dlgBasicConfirmParams = {
        textTitle: 'Example: Confirm Replacement',
        textBody: `This is a simple confirm box to ask the user a question.<br/><br/>Would you like to continue?`,
        showAnswerCancel: false,
        showAnswerFalse: true,
        dialogWidth: '425px',
        dialogHeight: '150px',
        dialogFontSize: '.85rem',
        dialogAnimate: true,
        onOpen: () => {ProcessOpen(document.getElementById('ex-basic-confirm-response'));}
    }

    dlgBasicConfirm = new spDialog(dlgBasicConfirmParams);
}

async function ShowBasicConfirm()
{
    await dlgBasicConfirm.ShowDialog().then(result => {ProcessResponse(document.getElementById('ex-basic-confirm-response'), dlgBasicConfirm.userResponse)});
}
Note that the ProcessOpen() and ProcessResponse() functions in the code block are specific to this page. You'd want to provide your own custom functions to process user input.
Worth mentioning that a Confirm dialog only allows the user to close it when they click one of the buttons. Alert boxes with a single button can be closed by clicking in the background cover area as well.
Back to top

Confirm with Cancel

This example shows how to display a confirm dialog that allows the user to to chose Yes (1), No (0), or Cancel (-1). It will launch the dialog and output the timestamp when the user opened the dialog and then once a response is received it will output that response as well to the Response container below.
We accomplish this by utilizing an OnOpen callback to print the timestamp and by showing the dialog with an async await call in order to wait for a user response using a promise. The use of the timestamps is strictly to show you that the dialog is indeed waiting on the user to respond.

Response

Code

let dlgConfirmCancel = null;
   
function init()
{
    let dlgConfirmCancelParams = {
        textTitle: 'Example: Confirm Replacement with Cancel',
        textBody: `This is a simple confirm box to ask the user a question and allow them to cancel the request. It also shows that you can adjust the text of the buttons and use percentages for width/height.

Do you agree?`,
        showAnswerCancel: true,
        showAnswerFalse: true,
        dialogWidth: '40%',
        dialogHeight: '20%',
        dialogFontSize: '.75rem',
        dialogAnimate: true,
        textAnswerTrue: 'Agree',
        textAnswerFalse: 'Disagree',
        onOpen: () => {ProcessOpen(document.getElementById('ex-confirm-cancel-response'));}
    }

    dlgConfirmCancel = new spDialog(dlgConfirmCancelParams);
}

async function ShowConfirmCancel()
{
    await dlgConfirmCancel.ShowDialog().then(result => {ProcessResponse(document.getElementById('ex-confirm-cancel-response'), dlgConfirmCancel.userResponse)});
}
Note that the ProcessOpen() and ProcessResponse() functions in the code block are specific to this page. You'd want to provide your own custom functions to process user input.
Worth mentioning that a Confirm dialog only allows the user to close it when they click one of the buttons. Alert boxes with a single button can be closed by clicking in the background cover area as well.
Back to top

Custom Body Alert

This example shows how to display an alert dialog with a custom body that includes a text input box. It will launch the dialog and output the timestamp when the user opened the dialog and then once a response is received it will output that response as well to the Response container below.
As with the other examples, we accomplish this by utilizing an OnOpen callback to print the timestamp and by showing the dialog with an async await call in order to wait for a user response using a promise. The use of the timestamps is strictly to show you that the dialog is indeed waiting on the user to respond.
Unlike the other examples, we are passing in a new parameter call customBody. This parameter expects a div object containing the detail you wish to show in the body of the dialog. The div should be placed someplace on your page with a style display of none to keep it from showing in your main content. If you view the source of this page and search for customAlertBody, you can see how this is accomplished for this example.
To show that this could be more than simple HTML, this example includes a text box to enter a name. Using the onClose callback parameter, we will take the value typed in that box and display it in the onClose Result area below.
There are no built in limitations on what content you can display with a custom body but there could be some practical ones. Any overflow in the body will receive scrollbars which may look odd in a dialog for instance. You could also utilize the values inputted into form fields in the dialog without using an onClose callback of course. This was simply the easiest way to show it in an example.

Response

onClose Result

Code

let dlgCustomAlertBody = null;

function init()
{
    let dlgCustomAlertBodyParams = {
        textTitle: 'Example: Alert Custom Body',
        showAnswerCancel: false,
        showAnswerFalse: false,
        dialogFontSize: '.75rem',
        dialogWidth: '35%',
        dialogHeight: '15%',
        dialogAnimate: true,
        customBody: document.getElementById('customAlertBody'),
        onOpen: () => {ProcessOpen(document.getElementById('ex-alert-custom-response'));},
        onClose: () => { document.getElementById('ex-alert-custom-onclose').innerHTML = `Welcome ${document.getElementById('customAlertBody_PersonName').value}!`; document.getElementById('customAlertBody_PersonName').value = ''; }
    }

    dlgCustomAlertBody = new spDialog(dlgCustomAlertBodyParams);
}

async function ShowAlertCustomBody()
{
    await dlgCustomAlertBody.ShowDialog().then(result => {ProcessResponse(document.getElementById('ex-alert-custom-response'), dlgCustomAlertBody.userResponse)});
}
Note that the ProcessOpen() and ProcessResponse() functions in the code block are specific to this page. You'd want to provide your own custom functions to process user input.
Back to top

Custom Dialog Design

This example shows how to display an alert dialog with a custom design. It will launch the dialog and output the timestamp when the user opened the dialog and then once a response is received it will output that response as well to the Response container below.
As with the other examples, we accomplish this by utilizing an OnOpen callback to print the timestamp and by showing the dialog with an async await call in order to wait for a user response using a promise. The use of the timestamps is strictly to show you that the dialog is indeed waiting on the user to respond.
We accomplish the custom design by using the referenced elements from the dialog object such as modalDialog. Check out the Parameters section of the ReadMe file for a full list of options.
Note that you may have to use some finesse if you plan to resize the components of the dialog as done in this example. For instance, removing the dlgCompletelyCustom.dialogBody.style.height = '50%' line would result in the answer area appearing outside the dialog area if you didn't adjust the dialogHeight parameter to a larger size.
In the future, I would like to expand on the styling options by including a few default style options using stylesheets and named classes. I may also add additional properties to more directly adjust the dialog design. Until then, using the named object references should suffice in most cases and it helps keep the file size small.

Response

Code

let dlgCompletelyCustom = null;

function init()
{
    let dlgCompletelyCustomParams = {
        textTitle: 'Example: Custom Dialog Design',
        textBody: 'This is an example of a dialog with custom formatting.  Compare it to the other examples and the differences should be apparent.',
        dialogWidth: '40%',
        dialogHeight: '175px',
        dialogAnimate: true,
        onOpen: () => {ProcessOpen(document.getElementById('ex-alert-completely-custom-response'));},
    }

    dlgCompletelyCustom = new spDialog(dlgCompletelyCustomParams);

    dlgCompletelyCustom.modalCover.style.backgroundColor = 'rgba(255, 255, 255, .5)';
    dlgCompletelyCustom.modalDialog.style.border = '1px solid #969696';
    dlgCompletelyCustom.modalDialog.style.borderTop = '0px solid #3268a8';
    dlgCompletelyCustom.modalDialog.style.backgroundColor = '#e0e0e0';
    dlgCompletelyCustom.modalDialog.style.padding = '0px';
    dlgCompletelyCustom.dialogTitle.style.height = '15px';
    dlgCompletelyCustom.dialogTitle.style.border = '4px solid #3268a8';
    dlgCompletelyCustom.dialogTitle.style.backgroundColor = '#3268a8';
    dlgCompletelyCustom.dialogTitle.style.borderRadius = '10px 10px 0px 0px';
    dlgCompletelyCustom.dialogTitle.style.textAlign = 'left';
    dlgCompletelyCustom.dialogTitle.style.color = '#ffffff';
    dlgCompletelyCustom.dialogTitle.style.padding = '5px';
    dlgCompletelyCustom.dialogTitle.style.textShadow = '2px 2px 2px rgba(0, 0, 0, .85)';
    dlgCompletelyCustom.dialogTitle.style.fontSize = '.9em';
    dlgCompletelyCustom.dialogBody.style.padding = '5px';                
    dlgCompletelyCustom.dialogBody.style.height = '50%';
}

async function ShowAlertCompletelyCustom()
{
    await dlgCompletelyCustom.ShowDialog().then(result => {ProcessResponse(document.getElementById('ex-alert-completely-custom-response'), dlgCompletelyCustom.userResponse)});
}
Note that the ProcessOpen() and ProcessResponse() functions in the code block are specific to this page. You'd want to provide your own custom functions to process user input.
Back to top