DHTMLSuite.modalMessage
Specifications
- Widget/Class name: DHTMLSuite.modalMessage
- Demo: demo-modal-message-1.html
- Css: [THEMES_FOLDER]/css/modal-message.css
Configuration
The modal message script can work as an alternative to the standard alert and confirm dialogs.
What it does is to display a message at the center of your screen. While the message is visible, all other page controls are disabled(optional).
The class used for this widget is the DHTMLSuite.modalMessage script. You have the choice between displaying
- Static content,
- Content from external files or
- Content from existing DOM elements.
External content will be inserted into the modal dialog box via Ajax.
The first we need to do is to create a modalMessage object:
messageObj = new DHTMLSuite.modalMessage( {shadowOffset:5,waitMessage:'Loading content - Please wait' }); // We only create one object of this class
We have also specified a "please wait" message and set size of the shadow effect to 5 pixels. Notice that these two properties have been sent to the constructor in an associative array. You have the possibility of specifying properties by calling set-methods or by sending data to the constructor. The constructor accepts these properties:
- url: Path to external file
- htmlOfModalMessage : Message as a string
- domRef: Reference to element on your page. This element will be displayed inside the message box. It could be the id, name or a direct reference to the elemeent.
- width: Width of message box
- height: Height of message box
- cssClassOfMessageBox: Alternativ CSS class to use on the message box.
- shadowDivVisible: Shadow is visible
- shadowOffset: Size of shadow
- isModal: Is the message box modal(default = true)
- waitMessage: Message to display while content is being retrieved via Ajax
There are also 5 important methods which you use to specify content, show and hide the modal dialog box.
- setHtmlContent(messageContent) is used to specify static content.
- setSource(url) specifies relative path to external file.
- setDomReference(domRef) specifies reference to DOM element on our page. This element will be displayed as the modal dialog message.
- display() displays the message.
- close() closes the message.
Here's an example how to use these methods:
<SCRIPT type="text/javascript">
function displayMessage(url)
{
messageObj.setSource(url);
messageObj.display();
}
<a href="#"
onclick="displayMessage('message.html');return false">Click here</a>
Here, I have created a custom function called displayMessage. This function calls the setSource and display methods. In other words, it specifies the url to the file we want to show in the message box. Then it shows the modal dialog.
In this case, I will put a call to the close() method inside the included file message.html. Example: <INPUT type="button" value="Close" onclick="messageObj.close()">
Examples:
Display information from existing DOM element
Let's say I want to display this:
<div id="modalMessageContent" style="display:none">
<h1>Content from DOM element on the page</h1>
<p>The modalMessage class has picked this message up from an existing element on the page</p>
<p><a href='#' onclick='closeMessage();return false'>Close</a></p>
</div>
inside a modal message box. This is how I can do that:
1: Create the modalMessage box object:
var msgObj = new DHTMLSuite.modalMessage({ width:500,height:400 });
2: Create a custom function which we call from links:
function displayMessage(domRef){
msgObj.setDomRef(domRef);
msgObj.display();
}
3: Create the link/button:
<A href="#" onclick="displayMessage('modalMessageContent');return false">Display</A>
Display static message
The procedure is almost identical as for the DOM reference, but instead of sending the id of an element to a displayMessage function, we send the message it's self as a string.
1: Create the modalMessage object the same way as above.
2: Create a custom function:
function displayStaticMessage(msg){
msgObj.setHtmlContent(msg);
msgObj.display();
}
3: Create the button/link which calls the displayStaticMessage function:
<A href="#" onclick="displayStaticMessage('HelloThis is a message from me to you!');return false">Display</A>
Display content from external files
This is also done in the same way as in the last two examples, but here, we send the path to the external file to a custom function and call the setSource() method instead of setDomRef and setHtmlContent.
<SCRIPT type="text/javascript">
var msgObj = new DHTMLSuite.modalMessage({ width:500,height:400 });
function displayExternalMessage(url){
msgObj.setSource(url);
msgObj.display();
}
</SCRIPT>
<A href="#" onclick="displayExternalMessage('msg.html');return false">Display</A>
Remember that the content of this file will be inserted into an existing HTML element on your page. This means that you don't need <HTML>, <HEAD> and <BODY> tags in this file.
