Integrating with the ModalDialog

• Example
• Introduction
• Hiding the ModalDialog
• Updates in December 2024
• Updates in September 2024
• ModalDialog configuration properties
• Customising the ModalDialog
• ModalDialog integration
• Covering the scroll bars
• Supplying the dialog as a string

Example

Shown below is an example of the ModalDialog that can be seen be right-clicking the chart and clicking on the Login to admin area... option. This shows the ModalDialog being used to show a login form.

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

Introduction

This page shows you how to make use of the ModalDialog library that's bundled with RGraph. This particular example adds a context menu to the chart, of which the only option is to show a login dialog. This could be used to allow logging into a user account or an admin area. Note that you don't have to use RGraph in order to use the ModalDialog - the library can be used standalone without making use of RGraph if desired.

The dialog 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 ModalDialog was originally an external library, however it's now bundled as part of RGraph.

<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.context.js"></script>
<script src="RGraph.line.js"></script>
<script src="RGraph.modaldialog.js"></script>

<script>
    //
    // Make the context menu
    //
    contextmenu_submenu = [
        ['A submenu item!', function () {alert('A submenu item!');}]
    ];

    contextmenu = [
        ['A submenu', contextmenu_submenu],
        null,
        ['Login...', function ()
        {
            ModalDialog.show({
                id: 'myDialog',
                zoomFactorStart: 0,
                zoomFactorEnd: 0
                // ...
            });
        }]
    ];
    

    line = new RGraph.Line({
        id: 'cvs',
        data: [45,12,16,18,44,54,23,21,56,58,33,47],
        options: {
            backgroundGrid: false,
            marginInner: 10,
            marginTop:50,
            linewidth: 15,
            shadow: false,
            xaxisLabels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            title: 'A line chart with a context menu (right click)',
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            xaxisTickmarks: false,
            yaxisTickmarks: false,
            xaxisLinewidth: 2,
            yaxisLinewidth: 2,
            textSize: 18,
            spline: true,
            shadow: true,

            // Add the contextmenu which was defined above
            contextmenu: contextmenu
        }
    }).draw();
</script>

Hiding the ModalDialog

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

<input type="reset" value="Cancel" onclick="ModalDialog.hide()">

Updates in December 2024

In December 2024 the ModalDialog was updated so that when it's being shown the background is no longer scrollable (previously you could scroll up and down the page with your mousewheel even whilst the ModalDialog was being displayed). You can see this in action by trying the example above.

Updates in September 2024

In September 2024 a few options were added to help in controlling the appearance of the ModalDialog - largely as a result of a few effects having been added. These effects are now the default so you only need to change the two zoomFactor* properties to 1 if you don't wish to use them. The example chart above shows the dialog and how it zooms in and zooms out when being shown and hidden. The full list of options is shown below.

...
styleBackground: {
    opacity: 0.75,
    color: '#fcc'
}
...

...
styleDialog: {
    borderRadius: '0',
    backgroundColor: 'red'
}
...

...
styleTopbar: {
    backgroundColor: 'black',
    border: 'none'
}
...

...
contextmenu: [
    [
        'Login to admin area...',
        function ()
        {
            ModalDialog.show({
                id: 'myDialog',
                width: 300
                zoomFactorStart: 2,
                zoomFactorEnd: 2,
                // ...
            });
        }
    ]
]
...

Customising the ModalDialog

You can customise the appearance of the ModalDialog by using three css classes, which are documented here and also shown below:

<style>
    /*
    * These are the CSS classes that you can use to customise the appearance of the ModalDialog.
    * If you're trying to override something which the scripts set, then because of the ordering
    * you may need to use the !important modifier.
    */
    
    /* This is the semi-opaque background */
    .ModalDialog_background {
    }


    /* This is the dialog */
    .ModalDialog_dialog {
        box-shadow: none !important;
    }


    /* This is gray bar at the top of the dialog */
    .ModalDialog_topbar {
    }
</style>

You can also use the styleBackground styleDialog and styleTopbar configuration properties to get a very similar effect. There are slight differences though: Firstly, the javascript properties are applied last and therefore you probably won't need to use the !important modifier and secondly, javascript properties are javascript not css - thus you'll need to use the javascript versions of the names (eg paddingTop vs padding-top)

ModalDialog integration

To integrate the ModalDialog look at the sample code above (the key section is where the context menu is defined). The method you should call is ModalDialog.show({id: 'myDialog', width: 300}). The id is the id of the layer to use. Only the innerHTML is used, not the layer itself, so it can be hidden by setting the css display property to none. The width is a number that is used as the width of the dialog.

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

Covering the scroll bars

Normally, a regular div lives inside the browser and cannot cover the scroll bars. There is however a way to achieve this but it does mean that restructuring your website may be necessary, and it's done by using an iframe. The following steps are involved:

1. The index page of your website creates an iframe and sets it to cover the entire window.
2. This iframe then loads the website.
3. The div then covers the top-most window.

The ModalDialog doesn't use this technique because it would require restructuring of your website, but there is an example of it here

Supplying the dialog as a string

Normally, having forms in you ModalDialog isn't a problem. However, if you want to access the form elements with javascript it can be tricky because there are two form elements with the same ID - the original, hidden one, and also the one in the ModalDialog 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(str);
</script>

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