Download modal message script

Demo

Bookmark and Share

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:

  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 <B>My</B> 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

Comments

Sebastien Julien
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
DHTMLGoodies
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.
CSchwarz
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.
WebDesignMad
What a great place for free scripts!
WebDesignMad at 05:04PM, 2011/03/22.
Thomas
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.
Geert-Jan
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
DHTMLGoodies
The script has been updated with a fix for IE9
DHTMLGoodies at 04:06PM, 2011/04/06.
Teodor
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.
Pramod
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.
matt
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
DHTMLGoodies
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.
matt
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.
DongJoo
When using commercial sites, What license?
DongJoo at 09:17AM, 2011/05/30.
Calum
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.
Calum
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.
Sapan
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.
Lloyd Ronick
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.
Norm Strassner
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.
Shachar
Same problem here.
Shachar at 01:20AM, 2011/09/19.
Shachar
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.
aditya
m also getting the same problem : "loading content, please wait"

any resolves??
aditya at 07:33AM, 2011/11/12.
Del6
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.
Del6
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.
Calum
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.
Anon
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.
Anon
Ignore that ^ I worked it out. Thanks!
Anon at 11:38PM, 2012/04/19.
Rene
script does not work with explorer 9... fix wanted ... thanks
Rene at 06:48PM, 2012/06/03.
lars
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.
Anand
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.
Roger
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.
Saravanan
This demo doesn't works in chrome version 29.It opens like a dot at the corner of the page....Can anyone sort it out.....Awaiting for reply
Saravanan at 08:33AM, 2013/09/24.
Peter
Hi, what license is this released under?
Peter at 10:16AM, 2013/11/07.

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2014 dhtmlgoodies.com