An example of the updated Modal Dialog library

Here's an example of the updated and improved Modal Dialog library that I mentioned in the last blog post that I made about a week ago. It includes the new ModalDialog.confirm method, which will make using prettier (than the browsers own confirm and prompt functions) confirmation dialogs really easy. It will be part of version 7.21 which will be released soon.

Demonstration

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

<script>
    function showDialog()
    {
        ModalDialog.show({
            id: 'myDialog',
            options: {
                zoomFactorStart: 1,
                zoomFactorEnd: 1,
                rotationStart: '0deg',rotationEnd: '0deg',
                skewStart: '-90deg, -90deg',
                skewEnd: '-90deg, -90deg',
                effectDuration: 1000,
                style: [
                    '.ModalDialog_dialog {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;}'
                ],
                position: 'center center',
                align: 'center center'
            }
        });
    }
</script>

And here's a demonstration of the ModalDialog.confirm function which will make producing pretty confirmation dialogs as easy as pie!

Demonstration

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

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