A modal dialog

• Introduction
• Browser support
• How it works
• Demonstration
• Example code
• Download

Introduction

The modal dialog is a Javascript dialog for prompting the user for input of some sort, or to confirm an action. For example it can be used as an aide to usability by focusing the users attention on a prompt, that needs either inpur or confirmation.

Browser support

The modal dialog is supported by all the major browsers:

• Internet Explorer
• Mozilla Firefox
• Google Chrome
• Apple Safari
• Opera

How it works

The dialog itself is a layer that initially, is hidden. When the Show() method is called, it is repositioned and displayed. The background is covered by a semi-transparent black div, which helps focus the users attention on the newly displayed dialog.

Demo

A demo is available here: Click me!

Sample code

Some sample ource code. First off, include the libraries and the CSS file.

<link rel="stylesheet" href="ModalDialog.css" type="text/css" media="screen" />

<script type="text/javascript" src="fade.js"></script>
<script type="text/javascript" src="ModalDialog.js"></script>

Then comes the code for showing the dialog.

<button onclick="ModalDialog.Show('myDialog', 300)">Click me!</button>

And finally the actual HTML that is used as the dialog.

<div id="myDialog" style="display: none" class="modalDialog">
    <h4>Would you like to do this that or the other?</h4>
    This dialog is regular HTML that you define yourself. View the source and you will see
    the dialog div at the bottom of the page, initially hidden.

    <br /><br />

    <div style="text-align: center">
        <button onclick="ModalDialog.Close()">Cancel</button>

        &nbsp;

        <button onclick="ModalDialog.Close(); alert('OK pressed...')">OK</button>
    </div>
</div>

The source

The ModalDialog is part of the RGraph library. This version is the most up-to-date and most advanced, so if you want the ModalDialog then get RGraph. If you really really want the original though, it's here.

RGraph: HTML5 canvas graph library

If you're interested in web development, then you may also be interested in RGraph: HTML5 canvas graph library. It uses HTML5 features to produce a wide variety of graph types. Because it moves the creation of graphs from the server to the client, it can significantly reduce the load on your server and your bandwidth usage.