Integrating with the Modal Dialog library

• Introduction
  • The Modal Dialog confirmation function
• Example
• Hiding the Modal Dialog
• Modal Dialog API properties
• Customising the Modal Dialog
• Modal Dialog integration
• Supplying the dialog as a string
• Using the Modal Dialog as a confirmation prompt

Introduction

This page shows you how to make use of the Modal Dialog library that's bundled with RGraph. The Modal Dialog has been part of RGraph for many years - but in version 7.21 (summer 2026) it was entirely rewritten and modernised to make use of better and more reliable techniques. A lot of now redundant, backwards-compatibility code was removed. As a result, it's not 100% compatible with the prior version but the updated code is more efficient and more reliable which makes upgrading to it well worth it.

The example below allows you to click on the button to show the dialog which is configured as a login form. This could be used to allow logging in to a user account or an admin area.

Note that you don't have to use RGraph in order to use the Modal Dialog - the library can be used standalone without involving RGraph if that's what you want.

The dialog that you show doesn't need to require user input - it could just be a static "Please wait..." type dialog, which is shown while a subsequent page loads, which takes a few seconds. Another use-case is to show more information to the user - an example of which is the Help link on the forum search page.

The Modal Dialog confirmation function

Also added in the new version, was the ModalDialog.confirm function. This serves as a replacement for the browser-native confirm and prompt functions. Using this function allows you to create pretty confirmation dialogs and prompts which call JavaScript functions (of your choosing) when the OK or Cancel buttons are pressed. More on the Modal Dialog confirm functionality below.

The Modal Dialog was originally an external library, however it's now bundled as a part of RGraph.

Example

Shown below is an example of the Modal Dialog that can be seen by clicking on the button. This shows the Modal Dialog being used to show a login form.

There's another example of using the Modal Dialog to show the help information that you can see on the forum search page (click on the help link).

Example dialog...

<script src="RGraph.modaldialog.js"></script>

<p style="text-align: center">
    <button id="myButton" style="font-size: 20pt; cursor: pointer">Login...</button>
</p>

<script>
    document.getElementById("myButton").onclick = function ()
    {
        //
        // This is the code that creates the Modal Dialog
        //
        ModalDialog.show({
            id: 'myDialog',
            options: {
                zoomFactorStart: 1,
                zoomFactorEnd: 1,
                rotationStart: '-45deg',
                rotationEnd: '-45deg',
                skewStart: '-90deg, -90deg',
                skewEnd: '-90deg, -90deg',
                translateStart: '-250px , -250px',
                translateEnd: '-250px, -250px',                
                effectShowDuration: 750,
                effectHideDuration: 750,
                style: [
                    '.ModalDialog_dialog {font-family: Verdana, sans-serif; line-height: 35px;padding: 20px !important;}',
                    '.ModalDialog_dialog td {font-size: 16pt !important;}',
                    '.ModalDialog_dialog input[type=reset],input[type=submit],input[type=text],input[type=password] {cursor: pointer;font-size: 16pt;}',
                    '.ModalDialog_dialog b {font-size: 22pt; font-style: italic;}'
                ]
            }
        });
    };
</script>

<!--
    This is the popup dialog (an alternative is to supply the HTML
    that the dialog uses as a string instead of the id of a <div> tag.
-->
<div id="myDialog" class="myDialog" style="display: none">
    <b>Please login</b>
    <table border="0">
        <tr>
            <td align="right" style="padding-top: 4px">Email:</td>
            <td><input type="text" name="email" style="width: 150px" /></td>
        </tr>
        <tr>
            <td align="right" style="padding-top: 4px">Password:</td>
            <td><input type="password" name="password" style="width: 150px" /></td>
        </tr>
        <tr>
            <td colspan="2" align="right">
                <input type="reset" value="Cancel" onclick="ModalDialog.hide()">
                <input type="submit"
                          name="submit"
                          value="Login »"
                          onclick="alert('This is just an example'); event.stopPropagation()">
            </td>
        </tr>
    </table>
</div>
<!-- End of dialog -->
</script>

Hiding the Modal Dialog

To hide the Modal Dialog (from a "Cancel" button in your dialog for example), you can use the ModalDialog.hide method:

<button type="button" onclick="ModalDialog.hide()">Cancel</button>

...
style: [
    '.ModalDialog_dialog {line-height: 25px;box-shadow: 3px 3px 3px gray !important; border: none !important;padding: 15px !important;font-size: 20pt;}',
    '.ModalDialog_dialog i {font-size: 12pt}',
    '.ModalDialog_dialog :where(input[type=text], input[type=password]) {width: 250px; font-size: 16pt}',
    '.ModalDialog_dialog :where(input[type=submit], input[type=reset]) {font-size: 16pt}',
    '.ModalDialog_dialog :where(input[type=reset], input[type=submit]) {cursor: pointer;}',
    '.ModalDialog_dialog input[type=submit] {background-color: blue; color: white; border: none; padding: 5px;}',
    '.ModalDialog_dialog input[type=reset] {opacity: 0.5;}'
]
...

style: [
    '{z-index: 10005 !important;}'
]

Customising the Modal Dialog

You can customise the appearance of the Modal Dialog by using the style property which is mentioned above in the API documentation, There's an example of using the style property to customise the Modal Dialog in the demos in the download archive . Note that the selectors that you give are automatically prefixed with .ModalDialog_container_xxx (where_xxx is a number) in order to restrict the CSS to just the Modal Dialog being shown. When the Modal Dialog is hidden the style element that was added is automatically removed.

Note: If you're trying to set styles which are set later in the document by other stylesheets or by the Modal Dialog library itself you may need to use the !important declaration in your rule like this:

style: [
    '.ModalDialog_dialog {font-size: 24pt !important;}'
]

Modal Dialog integration

To integrate the Modal Dialog look at the sample code above (the key section is where the onclick event listener is defined). The method that you should call is ModalDialog.show({id: 'myDialog', options: {...}}). The id is the id of the DIV tag to use. Only the innerHTML is used, not the DIV itself, so it can be hidden by setting the CSS display property to none. The width of the dialog can be set, if you want, by using CSS. Also, you can give the HTML to use as a string instead of the ID of a hidden DIV tag in the page (see below).

The only library needed for the Modal Dialog to work is RGraph.modaldialog.js - you do not need to use RGraph.common.core.js. This makes for far smaller download requirements for your users.

Supplying the dialog as a string

Normally, having forms in your dialog isn't a problem. However, if you want to access the form elements with JavaScript it can be problematic because there are two form elements with the same ID - the original, hidden one, and also the one in the Modal Dialog when it's shown. Because of this, you can supply the dialog as a string, like this:

<script>
    str = 'string:<h1>My Dialog</h1><p align="center"><button onclick="ModalDialog.hide();">Close</button></p>';
    
    ModalDialog.show({
        id: str,
        options: {
        }
    });
</script>

Also, you may find this method easier to use if you're showing multiple dialogs on your page.

Note: Because this is much easier than having the HTML embedded in your page, this is now the recommended way to show dialogs.

Using the Modal Dialog as a confirmation prompt

See examples of using the Modal Dialog to show confirmation dialogs here.

This is new in version 7.21 and allows you to easily use the Modal Dialog as a replacement for the built-in, but far less attractive, JavaScript confirm, prompt and alert functions.

It's not possible to block execution when showing a dialog box like the confirm, prompt or alert functions do but what can be done instead is to give a function that is 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 confirmation dialog.

The example code below 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 a function defined.

<script>
    function showConfirmationDialog ()
    {
        ModalDialog.confirm({
            text: 'Are you <b>sure</b> 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="showConfirmationDialog()">Click me</button>
</p>