This script displays a modal message at the center of the screen. All other page controls are disabled until the message is closed. You can choose between displaying static content inside the message box or content from an external file.

Files included in the package:

• demo-modal-message.html = Demo file
• js/modal-message.js = Main javascript file
• js/ajax.js = Ajax (Library from http://twilightuniverse.com/projects/sack)
• js/ajax-dynamic-content.js = JS file from the ajax dynamic content script.
• css/demos.css = CSS file the demos
• css/modal-message.css = CSS file needed in the script

This script displays a modal message at the center of your browser window. When this message is displayed, all the other controls on your page will be disabled.

This is how it works…

Create object of class DHTML_modalMessage

messageObj = new DHTML_modalMessage(); // We only create one object of this class

Now, you can use some other methods to specify what to show and the appearance of the dialog box. These are some of the important methods:

setSource()

Specify path to external file. The content of this external file will be displayed inside the box. Argument to this method is:

1. relative path to file(String)

Example:

messageObj.setSource("include/myMessage.html");

setHtmlContent()

Specify static HTML content. Argument to this file is:

1. HTML content(String)

Example:

messageObj.setHtmlContent("This is <strong>My</strong> message");

setSize()

Sets the size of the message box. Arguments to method are:

1. width(int) – Width of box
2. height(int) – Height of box

Example:

messageObj.setSize(500,300);

display()

Displays the message box. This method makes the message box appear on the screen. This method doesn’t take any arguments.

close()

Hides the message box. This method removes a message box appear from the screen. This method doesn’t take any arguments.

There are also some other methods you can use. Look at the comments above the method in modal-message.js for information about these

Demo: Demo
Download: Download Llink

Resource: http://www.dhtmlgoodies.com/index.html?whichScript=modal-message

Related Listings:

1. JQuery Modal Dialog Plugin This is a “yet another modal dialog JQuery plugin with...
2. Light Window : Single Modal Window Another implementation of single modal window. It uses iframes which...
3. DHTML Window with Tab Support – AJAX Script Configuration You need to include one css file and one...
4. Flexible Modal Windows With jQuery Superbox! jQuery Superbox! is a jQuery plugin for creating easily customizable...

Do you like this post?

Email: