Download modal message script

Download files

You can download the entire script from this Zip 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

Configuration

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:

relative path to file(String)

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

setHtmlContent()

Specify static HTML content. Argument to this file is:

HTML content(String)

Example: messageObj.setHtmlContent("This is <B>My</B> message");

setSize()

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

width(int) - Width of box
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

Comments

Hello. Im from quebec, in canada. I use many times many scripts from this site. Very cool. Very cool this site. Then, i use this script for many years. I use it under our CMS, with over 35 micro-applications. Then, is it possible to show informations about the programmer, to contact him, and get a customized version of this script?

Thanks for your good job.

Sebastien Julien

Solution Media Canada

Sebastien Julien at 09:52PM, 2011/03/11.

Admin comment

Sebastian,

Almost all scripts are created in-house. By sending a message to post[at]dhtmlgoodies.com, you will get in touch with the author.

DHTMLGoodies at 11:38AM, 2011/03/14.

Your initial example in demo-modal-message-1.inc uses Javascript to set the focus to the first field.
However the Javascript only works for the FIRST time you pop-up the dialog box and not for any subsequent time.

What is going wrong? I have a modal box I made that heavily uses javascript and it works the first time but not any subsequent times.

Thanks for your examples, I have used a few things from this website and I think it is great.

CSchwarz at 05:20AM, 2011/03/21.

What a great place for free scripts!

WebDesignMad at 05:04PM, 2011/03/22.

Hello,

Since i've installed Internet Explorer 9, my modal windows don't works.

Have got a solution to resolve that bug ?

I don't like IE but i'm obligate to verify compatibility with other navigator.

With FireFox and Google Chrome, it's all right.

Thomas at 08:22PM, 2011/03/31.

I also have problems with IE9, it does not show.
Only with compat. mode on..
Any solutions?

Geert-Jan at 06:36PM, 2011/04/04.

Admin comment

The script has been updated with a fix for IE9

DHTMLGoodies at 04:06PM, 2011/04/06.

Hello ,

i really like your script but unfortunately I'm stuck in a problem here. How i could add scroll if the height is bigger than my screen?

Any help will be appreciated , thank you

Teodor at 11:33AM, 2011/04/10.

Hi

I downloaded and when I tried the demo, for below examples, it didn't worked

Message from url (example 1)
Message from url (example 2)
Alternative confirm dialog (example 3)

Is this demo require to execute in server or can be executed in any static location.

Thanks in advance.

Pramod at 02:47PM, 2011/04/20.

I see the note says it is fixed in IE 9, however I pulled the newest modal-message.js and it does not seem to be working.

Can someone confirm that the download currently available on this page works on IE 9 official release?

Thanks,
Matt

matt at 02:46PM, 2011/04/29.

Admin comment

Matt,

I've just rechecked. The zip file contains the latest modal-message.js file. Please clear your cache and try to download the file again.

line 160 in the new modal-message.js file should look like this:

this.iframe = document.createElement('IFRAME');

DHTMLGoodies at 02:57PM, 2011/04/29.

I apologize - the new code DOES work in IE 9.0

Thanks a lot for a great tool!

Matt

matt at 07:44PM, 2011/04/29.

When using commercial sites, What license?

DongJoo at 09:17AM, 2011/05/30.

I thought it was failing for me too (in IE8), but then noticed I had zoomed into 105% view. At this level or above, the background goes solid grey with (for my site) a few random menu items being all that is visible from below.

Correcting to 100% or less fixes this issue. Not important to me but thought you may wish to know. Bizarrely, although it works fine at any zoom in FF4, resetting to normal retains a thicker border round the popup.

Thanks for a great piece of work,

Calum

Calum at 02:30PM, 2011/06/01.

Ignore my border issue; I'd edited the border thickness at some point in the past and the new files had reset that to default 3px.

Calum at 02:43PM, 2011/06/01.

I am getting error while using modal-message.js
in IE 9

Text :DOM Exception:INVALID_CHARACTER_ERR(5)

Thanks

Sapan

Sapan at 08:03AM, 2011/07/01.

Trying to use this script, but all I get is "loading content, please wait" message. My call is "displayMessage("include/mentor-message.inc");" I double-checked my include file and it is named correctly and in the correct folder (include). Any ideas?

Lloyd Ronick at 04:51PM, 2011/08/16.

How do prevent the 'close' link from displaying (other than a display:none for in the css)

Norm Strassner at 12:46AM, 2011/08/24.

Same problem here.

Shachar at 01:20AM, 2011/09/19.

Sorry, could not add successfully the quote of LLOYD RONICK:
I get the same problem: "loading content, please wait"
constantly only for dynamic content.

Shachar at 01:25AM, 2011/09/19.

m also getting the same problem : "loading content, please wait"

any resolves??

aditya at 07:33AM, 2011/11/12.

We always have the same problem "loading content, please wait".
But too I want to know how we can refresh automticaly the parent page of the modal message script on close ?
Thanks

Del6 at 01:55PM, 2012/01/05.

This Demo works on a server but in local files it doesn't.
In the Demo for "the Message from url (example 1)", if we choose Close or Send it does the same things, but how we can proceed to send input or texarea to update a database and after refresh the page behind the the modal message ?

Thanks a lot

Del6 at 09:13AM, 2012/01/06.

If you're getting the "loading content" error, then it's an error with whatever script you are running on the popup page.
To troubleshoot this, either comment out the script and reload (the popup should display without that error) or open the popup page directly in your browser rather than click on the hyperlink to it; any scripting error will display as you would expect.

Calum at 01:09PM, 2012/03/06.

How can I pass a value to the messageObj.setSize(400,180);
(in particular the height, 180)? I'm using your excellent script to display poems on a site, however they are all different lengths so require different height (and width if possible). Please explain clearly as I'm a n00b! Thanks in advance, and thanks for all the great codes!

Anon at 08:47PM, 2012/04/19.

Ignore that ^ I worked it out. Thanks!

Anon at 11:38PM, 2012/04/19.

script does not work with explorer 9... fix wanted ... thanks

Rene at 06:48PM, 2012/06/03.

Hi All, :-)
I experience the same problem, regarding "loading content, please wait", allthough I run everything from the server.
Can anyone give a hint pls.

Thanks in advance.

lars at 01:50PM, 2012/09/18.

Hi

Sorry for the newbie question. I'm trying to create the modal popup when someone clicks on an image. But I am unsure to how exactly I should implement this. I have uploaded all the files. And I modified the <a href></a> for the image to look something like this -

<a href="#" onclick="displayMessage('./includes/demo-modal-message-1.inc');return false"><img src="./images/button.png" style="border:0px;" /></a>

But when I click nothing happens. What should I do?

Anand at 07:08PM, 2012/10/25.

Hi,
I checked your demo in IE7. your demo worked well. but when i using downloded files in Localhost it wasnt work. why?/ please answer my question and save a LIFE! (:

Roger at 10:13PM, 2013/01/11.