MENU
.net Powerful JavaScript charts

Using the Modal Dialog as a confirmation dialog

Documentation about using the Modal Dialog.confirm function as a more attractive replacement for the JavaScript confirm and prompt functions. It can display all sorts of HTML - not just boring old text messages!

Introduction

New in version 7.21, the ModalDialog.confirm function allows you to use the Modal Dialog as a replacement for the built-in, but somewhat less attractive, JavaScript alert, confirm, and prompt functions.

It's not possible to block execution when showing a dialog box like the built-in functions do but what can be done instead is to give a function that's run when the OK button (or the cancel button) in the dialog is pressed. Doing this also allows you to fetch the values of any form inputs that you may have in your dialog box. Here are some examples:

Example 1: A basic dialog box

The first example shows a simple dialog box which has OK and Cancel buttons. When the OK button is pressed the callbacks.ok callback function is run and when the Cancel button is pressed the callbacks.cancel callback function is run. You don't have to give a callbacks.cancel function though - the dialog will just be hidden and removed from the DOM if there isn't one defined. 


<script>
    function showDialog ()
    {
        ModalDialog.confirm({
            text: 'Are you sure that you want to do that?',
            callbacks: {
                ok:     function () {alert('OK button was pressed');},
                cancel: function () {alert('Cancel button was pressed');}
            }
        });
    }
</script>

<p>
    <button type="button" onclick="showDialog()">Click me</button>
</p>

Example 2: A dialog box requesting user input

In this example, a dialog with a HTML form input is used to request some data from the user. The callback.ok function is called before the dialog is hidden and removed from the DOM so if you want to get hold of any elements in your callback function that are shown in the dialog, you can do that with the regular document.getElementById function. 

<script>
    function showDialog2 ()
    {
        ModalDialog.confirm({
            text: 'What is your name? <br /> <input type="text" id="name-input-text-box" />',
            dialog:{
                rotationStart: '-45deg',
                rotationEnd: '45deg',
                zoomFactorStart: 0,
                zoomFactorEnd: 2,
                style: [
                    '.ModalDialog_dialog {font-size: 20pt !important;line-height: 25px; padding-top: 10px !important; padding-bottom: 20px !important;}',
                    '.ModalDialog_dialog input {width: 300px;font-size: 20pt !important; margin-top: 10px;}',
                    '.ModalDialog_dialog button {font-size: 20pt;}'
                ],
            },
            callbacks: {
                ok: function ()
                {
                    var input = document.getElementById('name-input-text-box');
                    
                    alert('Hello ' + input.value + '!');
                }
            }
        });
    }
</script>

<p>
    <button type="button" onclick="showDialog2()" style="cursor: pointer; font-size: 20pt">Demonstration</button>
</p>

Example 3: A dialog box with no animation

Similarly to the Modal Dialog itself, animation can be turned off if you'd prefer just a static dialog box. 

<script>
    function showDialog3 ()
    {
        ModalDialog.confirm({
            text: 'Are you sure that you want to do that?',
            dialog: {
                style: [
                    '.ModalDialog_dialog {font-size: 20pt !important;line-height: 25px; padding: 20px !important; border: 1px solid gray !important;border-radius: 0 !important;}',
                    '.ModalDialog_dialog input {width: 300px;font-size: 20pt !important; margin-top: 10px;}',
                    '.ModalDialog_dialog button {font-size: 20pt;}',
                    '.ModalDialog_dialog button#rgraph-modaldialog-cancel-button {color: #aaa;}'
                ],
            },
            buttons: {
                ok:'Yes',
                cancel: 'No'
            },
            callbacks: {
                ok: function ()
                {
                    alert('Yes was pressed');
                }
            }
        });
    }
</script>

<p>
    <button type="button" onclick="showDialog3()" style="cursor: pointer; font-size: 20pt">Demonstration</button>
</p>

Example 4: A dialog box with just an OK button

Your dialog doesn't have to request any information from the user - it can be just an alert that just has an OK button to close it. To do this the CSS display property for the cancel button is set to none. 

<script>
    function showDialog4 ()
    {
        ModalDialog.confirm({
            text: '<h2>Terms and conditions</h2> <p style="border: 1px solid black;max-height: 200px; overflow: auto">gyu ftyu fty fty fgyu gu gyug u gyu giu ghui hui vfty dfr tse45 dft7ui jop jpio jiop byu ft frty fguiujiopjpo gyu ftyu fty fty fgyu gu gyug u gyu giu ghui hui vfty dfr tse45 dft7ui jop jpio jiop byu ft frty fguiujiopjpogyu ftyu fty fty fgyu gu gyug u gyu giu ghui hui vfty dfr tse45 dft7ui jop jpio jiop byu ft frty fguiujiopjpo gyu ftyu fty fty fgyu gu gyug u gyu giu ghui hui vfty dfr tse45 dft7ui jop jpio jiop byu ft frty fguiujiopjpo gyu ftyu fty fty fgyu gu gyug u gyu giu ghui hui vfty dfr tse45 dft7ui jop jpio jiop byu ft frty fguiujiopjpo gyu ftyu fty fty fgyu gu gyug u gyu giu ghui hui vfty dfr tse45 dft7ui jop jpio jiop byu ft frty fguiujiopjpo gyu ftyu fty fty fgyu gu gyug u gyu giu ghui hui vfty dfr tse45 dft7ui jop jpio jiop byu ft frty fguiujiopjpo</p>',
            dialog: {
                effectShowDuration: 250,
                effectHideDuration: 250,
                style: [
                    '.ModalDialog_dialog {width: 500px; font-size: 14pt;line-height: 25px;}',
                    '.ModalDialog_dialog h2 {margin: 0 !important;margin-top: 10px !important;}',
                    '.ModalDialog_dialog p {padding: 5px;}',
                    '.ModalDialog_dialog button {font-size: 16pt;}',
                    '.ModalDialog_dialog button#rgraph-modaldialog-cancel-button {display: none;}',
                    '.ModalDialog_dialog button#rgraph-modaldialog-ok-button {background-color: blue; color: white;outline: none;border: 0px solid #0000; padding: 5px;}'
                ]
            }
        });
    }
</script>

<p>
    <button type="button" onclick="showDialog4()" style="cursor: pointer; font-size: 20pt">Demonstration</button>
</p>

Example 5: A dialog box with a rotate effect

In this demo there are animation effects used when the dialog is shown and hidden. There's a zoom effect and also a rotation effect used, as well as the usual fade-in and fade-out. These are implemented by specifying the start and the end zoom/angle values. The animation in-between is handled by CSS transitions. 

<script>
    function showDialog5 ()
    {
        ModalDialog.confirm({
            text: 'Are you sure that you want to do that?',
            style: [
                'button {font-size: 120%;}'
            ],
            dialog: {
                zoomFactorStart: 0,
                zoomFactorEnd: 0,
                rotationStart: '-90deg',
                rotationEnd: '90deg'
            }
        });
    }
</script>

<p>
    <button type="button" onclick="showDialog5()" style="cursor: pointer; font-size: 20pt">Demonstration</button>
</p>

Example 6: A dialog box with a zoom effect and positioning

In this demo, the confirmation dialog box is positioned near the top of the page and also is zoomed in and out when it's displayed and hidden. 

<script>
    function showDialog6 ()
    {
        ModalDialog.confirm({
            text: '<b>Are you sure that you want to do that?</b>',
            style: [
                'button {font-size: 120%;}'
            ],
            dialog: {
                zoomFactorStart: 0,
                zoomFactorEnd: 0,
                position: '120px 15%',
                align: 'left top'
            }
        });
    }
</script>

<p>
    <button type="button" onclick="showDialog5()" style="cursor: pointer; font-size: 20pt">Demonstration</button>
</p>

Example 7: A dialog box with a header

In this demo, the confirmation dialog box has a coloured banner thats added to the dialog using the header option and then styled by using the dialog property to access the Modal Dialog object on to which the style is then set using the style property. 

<script>
    function showDialog7 ()
    {
        ModalDialog.confirm({
            text: 'Are you sure that you want to do that?',
            header: '<div id="header">Please confirm</div>',
            callbacks: {
                ok:     function () {alert('OK button was pressed');},
                cancel: function () {alert('Cancel button was pressed');}
            },
            dialog: {
                style: [
                    '.ModalDialog_dialog {overflow: hidden;border-radius: 0 !important;box-shadow: 0 0 25px #aaa;}',
                    '.ModalDialog_dialog div#header {margin: -5px;margin-bottom: 10px;padding: 5px; padding-left: 10px;background-color: #ccc; border: 1px solid gray; line-height: 30px;font-weight: bold;font-style:italic;}'
                ]
            }
        });
    }
</script>

<p>
    <button type="button" onclick="showDialog7()" style="cursor: pointer; font-size: 20pt">Demonstration</button>
</p>

Example 8: A dialog box with a skew transformation effect

In this demo, the confirmation dialog box uses a skewing transformation which you can also see on the main Modal Dialog documentation page. 

<script>
    function showDialog8 ()
    {
        ModalDialog.confirm({
            text: 'Are you sure that you want to do that?',
            callbacks: {
                ok:     function () {alert('OK button was pressed');},
                cancel: function () {alert('Cancel button was pressed');}
            },
            dialog: {
                zoomFactorStart: 1,
                zoomFactorEnd: 1,
                rotationStart: '0deg',
                rotationEnd: '0deg',
                skewStart: '-90deg, -90deg',
                skewEnd: '-90deg, -90deg',
                effectShowDuration: 1000,
                effectHideDuration: 1000,
                style: [
                    '.ModalDialog_dialog {line-height: 35px;padding: 20px !important;}',
                ]
            }
        });
    }
</script>

<p>
    <button type="button" onclick="showDialog8()" style="cursor: pointer; font-size: 20pt">Demonstration</button>
</p>

Example 9: A dialog box combining the various transformation effects

In this demo, the dialog is shown and hidden using a combination of the various transformations that are available. 

<script>
    function showDialog9 ()
    {
        ModalDialog.confirm({
            text: 'Are you sure that you want to do that?',
            dialog: {
                rotationStart: '-45deg',
                rotationEnd: '-45deg',
                skewStart: '-90deg, -90deg',
                skewEnd: '-90deg, -90deg',                
                translateStart: '-300px, -300px',
                translateEnd: '-300px, -300px',
                effectShowDuration: 1000,
                effectHideDuration: 1000
            }
        });
    }
</script>

<p>
    <button type="button" onclick="showDialog9()" style="cursor: pointer; font-size: 20pt">Demonstration</button>
</p>

Configuration properties

These are the configuration properties that are available to you that allow you to configure the Modal Dialog confirmation box to appear and act the way you want it to. A significant one is the dialog property which allows you to access and configure the underlying Modal Dialog.

Name: buttons
Description: 
Using this property you can give the text that goes on the OK and Cancel buttons. To configure the appearance of the buttons you can use CSS using the dialog.style property.
Default: {ok: 'OK', cancel: 'Cancel'}
Name: callbacks
Description: 
Use this property to specify functions that are run when the OK and Cancel buttons are pressed. You can give one function for each button. It should look like this: 
ModalDialog.confirm({
    text: 'Are you sure that you want to continue?',
    callbacks: {
        ok:     function () {alert('OK button was pressed');},
        cancel: function () {alert('Cancel button was pressed');}
    }
});
Name: header
Description: 
This option allows you to specify some header text that is positioned above the main text of the confirmation dialog. In example 7 above, the header bar is specified by adding some HTML with this property.
Default: [an empty string]
Name: footer
Description: 
This option allows you to specify some footer text that is positioned below the main text of the confirmation dialog.
Default: [an empty string]
Name: dialog
Description: 
The dialog option is a reference to the underlying Modal Dialog object. By using this option, you can access all of the properties of the Modal Dialog, most notably, the style property which you can use to configure how the dialog looks. For example: 

ModalDialog.confirm({
    text: 'What is your name? <br /> <input type="text" id="name-input-text-box" />',
    dialog:{
        rotationStart: '-45deg',
        rotationEnd: '45deg',
        zoomFactorStart: 0,
        zoomFactorEnd: 2,
        style: [
            '.ModalDialog_dialog {font-size: 20pt !important;line-height: 25px; padding-top: 10px !important; padding-bottom: 20px !important;}',
            '.ModalDialog_dialog input {width: 300px;font-size: 20pt !important; margin-top: 10px;}',
            '.ModalDialog_dialog button {font-size: 20pt;}'
        ],
    }
});
Default: [a Modal Dialog object]

A convenient shortcut function

The code to show one of these confirmation dialog boxes isn't quite a one-liner! So to make it easier to use in your code you could add this function to your library of JavaScript code that's included in your pages: 

<script>
    function myConfirm (msg, ok, cancel = null)
    {
        ModalDialog.confirm({
            text: msg,
            callbacks: {
                ok:     ok,
                cancel: cancel
            }
        });
    }
</script>

Then you just call it like this every time that you want to show a confirmation box: 

myConfirm('Are you sure that you want to do that?', myCallbackFunction);

Doing this allows you to configure the dialog once and then you'll have uniform dialog boxes across your whole site/application.

Using the CSS !important modifier

The CSS !important modifier is used to alter the precedence of your CSS rules. In the case of the Modal Dialog, the default styles are added to the bottom of the head section of the page. This means that your own CSS may take priority over that of the Modal Dialog. So to overcome this you can specify the !important modifier at the end of the rule that you give to the Modal Dialog like this: 

ModalDialog.confirm({
    text: 'What is your name? <br /> <input type="text" id="name-input-text-box" />',
    dialog:{
        style: [
            '.ModalDialog_dialog {font-size: 20pt !important;line-height: 25px; padding-top: 10px !important; padding-bottom: 20px !important;}',
            '.ModalDialog_dialog input {width: 300px;font-size: 20pt !important; margin-top: 10px;}',
            '.ModalDialog_dialog button {font-size: 20pt;}'
        ],
    }
});