JavaScript dialog boxes

I have put together a lightweight (~4.5kb) JavaScript dialog box library. The script currently offers four dialog styles: alerts, warnings, prompts and success. There is nothing to add to your page except references to the JavaScript and CSS if you choose not to incorporate them in your existing files. The Divs are dynamically added to the DOM when the function is called. The function currently relies on a content wrapper to calculate the page height however you could use the body height but the background overlay would only cover the currently visible content. The variable for the wrapper ID as well as the speed and timer settings are available at the top of the JavaScript file. Dialog boxes are generated as follows.

showDialog('Error','You have encountered an error.','error',2);

The first property is the title of the box, the second is the message, the third is the box style (alert, warning, prompt or success) and the fourth is an optional autohide timeout. Set the auto hide to the number of seconds you want to show the dialog before it fades out. The message can take HTML, just be sure and escape when necessary. The “look and feel” can easily be changed through the CSS and additional styles can easily be added by adding 2 lines of CSS.

This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here. Paid support is also available, contact me for details.

Update 4/23/2008 – Added autohide feature, thanks for the suggestion Chris.
Update 4/23/2008 – Added dynamic vertical positioning, 1/3 way down the current viewable window.
Update 4/25/2008 – Resolved double click issue when closing.
Update 5/21/2008 – Resolved issue when clicking to close the dialog box before the fading animation completes.

View the demo.

Download the source.

Posted by Michael in Design,JavaScript on April 22, 2008

260 Responses

Very cool! Thanks!

I added a simple autohide parameter so it fades away without a click.

function showDlg(title,message,type,fadeout) {

if (fadeout)
window.setTimeout(“hideDialog()”, mdTimer + fadeout);
}

Chris Willis on April 23, 2008 at 7:29 am

@Chris – Thanks for the suggestion, I have added an autohide feature and dynamic vertical positioning this morning and update the source/demo accordingly.

Michael on April 23, 2008 at 8:32 am

I’ve added another type to it called Loading.

Works great for my gmap program on the initial page load..

if(autohide || type == ‘loading’)
{
dialogclose.style.visibility = “hidden”;
window.setTimeout(“hideDialog()”, (autohide * 1000));
}

But of course I have an issue with the rest of my ajax calls and pulling this up – or rather removing it.

EllisGL on April 23, 2008 at 3:07 pm

@EllisGL – Glad you are finding use for this. Shoot me an email if I can help you with your problems.

Michael on April 23, 2008 at 3:41 pm

Hi,
great work, however it doesn’t work if you have lightbox script on the same page.
I’ve been trying to get it to work, no luck so far.

Do you have an idea how to fix it?

Matt on April 24, 2008 at 3:45 am

@Matt – Are you getting a specific JavaScript error? Your best bet might be to namespace the entire script to avoid conflicts. If you send me a link I will take a look.

Michael on April 24, 2008 at 7:50 am

Very magnificent, thank you. But I find a problem, there isn’t choose button in dialog when type is ‘prompt’. It’s really a pity.

numenzq on April 24, 2008 at 10:05 pm

@numenzq – The content of the boxes is fully customizable and intentionally generic. To create selections simply build up the HTML and pass the string to the function. If you have any problems let me know.

Michael on April 24, 2008 at 10:12 pm

Just so you know, if you double or triple click the dialog’s close button it will break the script such that the next dialog box won’t appear again.

eyn on April 25, 2008 at 8:17 am

@eyn – Thanks for pointing that out. The issue has been resolved.

Michael on April 25, 2008 at 8:33 am

This looks amazing, and I have wanted one of these for some time!! No more boring Javascript prompt for me! Plus requesting a password in a prompt without masking the password looked bad, you have saved my day! lol, Thanks for sharing this to everyone!

Fred on April 25, 2008 at 11:49 am

Very good!!

I just changed the:

dialogmask = document.createElement(‘div’);

for:

dialogmask = document.createElement(‘iframe’);

That way, the dialog stays over the selects…

Thanks for sharing!!

Juliano on April 25, 2008 at 12:44 pm

Very nice! Two tips…

1. You can change this code:

dialog.timer = setInterval(“fadeDialog(1)”, TIMER);
if(autohide) {
dialogclose.style.visibility = “hidden”;
window.setTimeout(“hideDialog()”, (autohide * 1000));
} else {
dialogclose.style.visibility = “visible”;
}

to:

dialog.timer = setInterval(“fadeDialog(1)”, TIMER);
dialogclose.style.visibility = “hidden”;
if(autohide) {
window.setTimeout(“hideDialog()”, (autohide * 1000));
}

2. You could save a bunch of code, and add more features, if it’s integrated with jQuery: http://jquery.com/

mark on April 25, 2008 at 8:25 pm

@mark – Thanks for the tips. As for the first suggestion the else statement is there for the instance that an autohide window is called and then one that is not autohidden. If the else is not present then the close button would not be visible on the second popup. As for jQuery I will definitely will port this to jQuery soon and publish some other neat jQuery scripts as well. I will continue to maintain this script independent of any other JS framework.

Michael on April 25, 2008 at 8:36 pm

@Michael: Ah, thanks for correcting me. I look forward to a jQuery version of this. Good luck!

mark on April 26, 2008 at 10:27 am

Nice script. I liked it. I’ll try this on my next web application.

Rony on April 28, 2008 at 2:41 pm

Hi, this is a much nicer looking than the brower prompts. I appreciate that the showDialog() accepts an html param so no doubt the following is possible, but can you give me a code example of using this to simulate the javascript prompt() function? i.e i need to retrieve a string value in return from showDialog() function. Thanks in advance :)

Paddy on April 28, 2008 at 7:05 pm

@Paddy – It would work a little differently than how the system dialog works unless you alter the backend JavaScript to directly return a value. You could easily do something like…

showDialog(‘Confirmation’,'Are you sure you want to delete the entry?<br /><br /><a href=\’#\’ onclick=\’responseFunction(1); hideDialog()\’>yes</a>’ | <a href=\’#\’ onclick=\’responseFunction(0); hideDialog()\’>no</a>’,'prompt’);

This is a crude example but you get the drift… just call a response function (responseFunction) and pass it a flag (0 or 1) to tell it which option was clicked. Hopefully that answers your question. If not just shoot me an email.

Michael on April 28, 2008 at 7:29 pm

Hi, looks really pro.

How can I add an ‘OK’ button to any of these modal boxes, so that the box is dismissed when clicked?

Many thanks,

Gizmo

Gizmo on April 29, 2008 at 4:31 am

@Gizmo – You could easily do that using the method in my previous response or you could add a trigger in the backend JS based on the dialog type or for all of them that appended an “Ok” button to the innerHTML of the content area. The function that would need to be called to close it would be hideDialog(). If you need more assistance shoot me an email.

Michael on April 29, 2008 at 7:56 am

Very very good work
From Italy, thank you.

bye

Emanuele on April 30, 2008 at 5:58 am

Beautiful dialogs, thanks a lot for share your work.

Greetings from México.

J.

OddJoe on May 01, 2008 at 4:09 am

Is this released under an open source license ? If so, please include a license header.

jsguy on May 03, 2008 at 12:21 am

@jsguy – Absolutely, everything I have released so far is completely free for any use personal or commercial. I will include the license info in the future. Thanks for the feedback.

Michael on May 03, 2008 at 8:41 am

Hi,

Just stumbeled over this, very nice :)

I’m working in a frameset and would like to integrade it with a login script.

My problem is that I can’t make it break out af the frame…

How can I solve this, plz write to my email.

Best regards

Mark J. Zweidorff on May 08, 2008 at 6:04 pm

Michael, great tool. There is one minor problem that i’m finding, although it is minor would be nice for a fix. It appears that calling hideDialog() is ignored if the dialog hasn’t finished opening. Why is this a problem, you may ask? I am opening the dialog with a yes/no prompt. Clicking yes or no both close the dialog, but yes performs a subsequent action after calling hideDialog(). But in the case of “yes” the action is performed without the window closing (if the dialog hasn’t fully faded in), it would need to be clicked on again, which would call the action twice. This is only a problem for example in the case of quick users who are familiar with the user prompts. Users have to wait for the dialog to fully fade in to click “no” for example, which could potentially be tedious having to click it a couple times, making the interaction not seem receptive.

If you’re not with me then let me know. Thanks :)

Paddy on May 09, 2008 at 5:28 pm

@Paddy – I will be out this evening but will get this resolved sometime tomorrow and an updated posted. Thanks for reporting the issue.

Michael on May 09, 2008 at 5:41 pm

In IE on a Mac rather than poping up the dialogbox the screen just goes white. Any ideas? It works wonderfully, with a few tweaks to fit my needs, in all other browsers / OS I have tested it in.

Ty on May 13, 2008 at 2:45 pm

@Ty – Is it a beta version of IE? It might have to do with the alpha/opacity support for the browser. If you get me a browser version I will do some research try to get hold of a Mac to test. Thanks for reporting the issue.

Michael on May 13, 2008 at 3:08 pm

@Michael – It’s actually IE 5.2 for Mac (pretty much the last IE release for Mac as far as I’ve read). And I agree it probably has to do with the alpha/opacity.

Ty on May 15, 2008 at 3:45 pm

Here Cristiano from Italy… Thenks a lot!!! It’s so usefull!!!!

Just a question: How can I modify window dimensions?

Thanks

Cristiano on May 20, 2008 at 2:43 am

Hi, i made a suggestion/request on 09 May 2008 at 5:28 pm, which you said you’d take a look at. Any progress or conclusions on this? :)

Paddy on May 20, 2008 at 6:04 am

@Cristiano – You simply need to change the width for the #dialog and the #dialog-header and the height for the #dialog-content in the CSS. Let me know if you run into any problems.

@Paddy – I am so sorry, by the end of the day I will update you. Thanks.

Michael on May 20, 2008 at 8:07 am

I am having a problem using the dialog on a form with select objects. The z-index issue in IE is causeing them to display above the dialog. I did follow the advice of one of the posts to change the dialogmask to an iframe instead of a div and I did that but it still shows the selects above the dialog. Do i need to do something with the CSS too?

Thanks,

Steve on May 22, 2008 at 10:19 am

@Steve – Ah yes, I had not considered the IE6 Select issue. You should be able to resolve it with the proper iFrame setup, although I am definately not a fan of iFrames. Otherwise I have seen elaborate JavaScript fixes out there but have yet to test any of them. I did a quick search on Google and found a couple non-js solutions that make sense and are fairly lightweight. Just shoot me an email if you need any help.

Michael on May 22, 2008 at 10:41 am

Thank you so much for share you work, is really really good!!!!!!
Congratulations!!!

Carla on May 31, 2008 at 8:02 am

Great tool! Question: Our website is required to be flush with the top of the page (no gaps). By adding the div id=”content” just after the body and just before /body, we get a gap at the top of the page showing the background. How can we best implement your solution/tool covering the whole page but avoiding the gap?

Thanks!

David on June 03, 2008 at 12:28 pm

@David – You can remove the #content id style from the stylesheet. It is set at 20px for the demo. Shoot me an email if you have any more questions.

Michael on June 03, 2008 at 1:02 pm

Really impressive work! Only one noticeable oversight, no Information dialog. Any chance you’ll be adding gifs for something like that in the near future? Thanks!

Joves on June 06, 2008 at 10:57 am

Hi, thanks your hard work. I have added :
if(dialog.timer) clearInterval(dialog.timer);
at line 88 to avoid too many times show dialog if u had to.

sike on June 11, 2008 at 3:31 am

can any one email me
1) how to solve the code that can be use for confirmation
ok and cancel. my my form use ajax validation.
2)after user login and fail.. how to appear error dialog automatically if user fail ?? i try use alert(); but cant .
help me… im really noob to in javascript…

kvic on June 12, 2008 at 3:02 am

@kvic – Contact me with a link to your demo and I will help you work through your issues.

Michael on June 12, 2008 at 8:21 am

Great stuff!! keep up the good work. I’ll will visit often

warren on June 14, 2008 at 9:29 pm

gr8.. thankx for your css script.. its gr8 to have it…

regards
FEROZ

Mohd Shaik on June 16, 2008 at 9:18 am

It’s great but there’s a white border I can see which wouldn’t look that good if the body background-color way not white. The white border around the Dialog box would be seen and it would look like th message box is in another container. If it’s fixed, then it’s an amazing job.

And also there should be at least an Ok button.

You rock man.

Saj on June 18, 2008 at 3:40 am

Hi! Thanks for your work, its very helpful for me! I have a question, Im using your Custom JavaScripts Dialog boxes, but it doesnt accept images or tables on it, any suggestion?

Thanks!

Santiago Roque on June 18, 2008 at 5:58 am

@Santiago Roque – It should take any escaped HTML.

Michael on June 18, 2008 at 8:29 am

@Saj – You can easily remove the white with CSS. I just thought it looked better without the surroundings bumping up against it. Of course you could change the color or remove it. I purposefully left the content blank so you could have complete control over the formatting but since I have gotten so many requests I will include that functionality in my next release.

Michael on June 18, 2008 at 8:32 am

Excellent work ! Thank you !

I have a doubt
How can we add Yes no button in Confirmation dialog?

Manoj on June 25, 2008 at 11:59 pm

@Manoj – You can pass any HTML through the script to build the appropriate buttons or simply extend the javaScript for a native option including the buttons.

Michael on June 26, 2008 at 8:18 pm

Hi there, great script! Would you mind it if I modified it to be part of a namespace, and put it into my InterModule JSAPI javascript library? If you wanted to, I would also put credit to you if you want.

Great thanks,
Delan
creator of the InterModule SourceForge project
juggernaut0102@yahoo.com.au
sf.net/projects/intermodule
intermodule.sf.net

Delan on June 28, 2008 at 3:04 am

@Delan – Feel free to distribute any way you like. Credit would certainly be appreciated. Shoot me an email if you need anything.

Michael on June 29, 2008 at 6:26 pm

Hey Michael, I just noticed something.. try opening one of the dialog boxes(except error one) and then hold down the enter key for a while. Now try to close it. You won’t be able to. I am testing using Firefox 2.0.0.14. Is it again a browser issue?

Saj on June 30, 2008 at 8:07 am

@Saj – Yes, I see what you mean now but only if you press enter really fast. It doesn’t look like anything is being changed in the DOM by doing so… not really sure why that is happening.

Michael on June 30, 2008 at 6:18 pm

ARIGATO!!!!

Thks!!!

GRACIAS

RockXell -Carlos on July 02, 2008 at 3:41 pm

Hi,

I’m trying the dialog boxes but I cannot make it run as a confirmation window. After the window display I press any keys but nothing happens. Did I missed something.

Another questions how can I make an error window to redirect to another page when I close it. I’ve put a window.load after the call to the dialog box but then in that case the dialog box only shows for 1 second and it redirects.

Regards,
ALejandro.

Alejandro Barrere on July 03, 2008 at 10:06 am

Excellent dialog box! Very easy to use with elegant styling out-of-the-box.

To resolve the IE6 select box issue, I followed Juliano’s suggestion to use an IFRAME rather than DIV when creating the dialogMask. It works for me in IE6 and FF3.

One line change:

I just changed line 48:

dialogmask = document.createElement(’div’);

to:

dialogmask = document.createElement(’iframe’);

~~~
Change per Juliano on 25 Apr 2008 at 12:44 pm

AnonDeveloper on July 04, 2008 at 7:39 am

@Alejandro – I am a little confused by your first question. As for the window.location, that would need to be placed in the function that closes the window and not in the load function itself.

Michael on July 04, 2008 at 8:23 am

Michael, thanks for your response.

The only problem I’m having with the dialogs is that if there’s any code after the call to the dialog boxes like a response.redirect (ASP) or window.load (java) the boxes won’t show at all it just redirects. Any solutions for that.

Thanks a lot
Alejandro.

Alejandro Barrere on July 12, 2008 at 2:25 am

@Alejandro – I am confused as to why you would want to redirect at the same time you called the boxes. Shoot me an email with your code an I will look into it.

Michael on July 15, 2008 at 6:34 pm

I want to add “yes” and “no” images to the content of the prompt and onclick do the delete and hideDialog(). But firat im unable to see the “yes”image. Then the delete and hidDialog is not working.

<a href=”javascript:showDialog(”,’<b>Are you sure you want to delete the entry?</b><br/> (This cannot be undone) <br/> <a href=\’{message.deleteURL}\’ onclick=\’responseFunction(1);hideDialog()\’><img src=\’yes1.png\’></a>’,'prompt’);”>
<img src=”images/contactconsole/delete.png” alt=”"/> </a>


I did not add the “No” button image yet. Want the “yes” button to work first.

Thanks very much.

jyothi

Jyothi on July 16, 2008 at 3:58 pm

jyothi – It looks like your first image tag is not closed. The hideDialog should work unless your responseFunction is throwing an error.

Michael on July 17, 2008 at 5:48 pm

Nope,

<a href=”javascript:showDialog(”,’<b>Are you sure you want to delete the entry?</b><br/> <a href=${message.deleteURL}><img src=’http://jyothi.xxx.com:8080/images/cc/yes1.png’/></a> <a href=cc.htm onclick=’responseFunction(0); hideDialog()’><img src=’no1.png’/></a>’,'prompt’);”>
<img src=”images/cc/delete.png” alt=”"/> </a>

I tried putting the images in the images/cc and also in the javascript folder… . Also tried giving the whole http address to the images, still cant see the yes and no images.
J

J on July 18, 2008 at 3:03 pm

it says invalid character at:
dialogmask.style.height = content.offsetHeight + ‘px’;

J on July 21, 2008 at 11:49 am

Hi Michael,
Its working perfectly. Awsome. Great Job.
I took the onclick event and it is working..I dont need it anyway since the href is taking me to a different page.
Thx muxh.
Michael, could you delete my last two messages. I think I cluttered your comment blog.
really sorry.
again great job.
J

Jyothi on July 22, 2008 at 6:59 am

***Urgent***

Michael, I tried using the fix for IE which is changing line 48 “div” for “iframe” but I’m still getting an error: “Internet Explorer cannot open the site:xxxxx – Operation Aborted” and this page is the one that it has the dialog box.

I really need to fix this, do I have to change code somewhere else then line 48.

I appreciate your help.

Regards,
Alejandro.

Alejandro Barrere on July 24, 2008 at 2:56 pm

By the way the IE version is: 6.0.2900.2180.xpsp_sp2_gdr.070227-2254 but I got the same results in other 6.0 versions.

Thanks a lot
Alejandro.

Alejandro Barrere on July 24, 2008 at 3:04 pm

When i call your function from vb.net using
Dim scriptString As String = “<script language=”"JavaScript”"> showDialog(‘Success’,'You have encountered an error.’,'Success’);</script>”

Page.RegisterStartupScript(“Startup”, scriptString)
It doesnt work, do you have any solution

kam on July 25, 2008 at 12:25 pm

When i call your function from vb.net using
Dim scriptString As String = “<script language=””JavaScript””> showDialog(’Success’,’You have encountered an error.’,’Success’);</script>”

Page.RegisterStartupScript(”Startup”, scriptString)
It doesnt work, do you have any solution

kam on July 25, 2008 at 12:31 pm

Hello All,

Please reply soon if you have any clues,
I have a button which will take the values of form field and submit to database, After successful submit i try to call the showdialog.js but it doesn’t display properly.

I am calling java script from the button click in VB>NET
Dim scriptString As String = “<script language=””JavaScript””> showDialog(’Success’,’You have encountered an error.’,’Success’);</script>”

Page.RegisterStartupScript(”Startup”, scriptString)
It doesnt work, do you have any solution

Thank you

kam on July 28, 2008 at 8:36 am

I wanted to use this instead of have a normal alert, i have a javascript validation function, how do i go adding your method to my function.

Help on July 29, 2008 at 5:26 am

The dialogs have been wrapped into a jQuery plugin:

http://plugins.jquery.com/project/modaldialog

More info on the plugin here:

http://feed.transisted.com/2008/07/adblockcheck.html

Transitech on July 29, 2008 at 8:47 pm

thanks a lot
nice work

neo on July 31, 2008 at 12:29 am

@Help – Everything you need to see hwo the script works is included in the zip file. Just take a look at the markup and the instructions in the post.

@Transitech – Thanks for sharing, looks great.

Michael on August 03, 2008 at 9:43 am

Looks very nice and I’ll use it in a future project for sure. For now it doesn’t seem to work wel with IE7 so we’re not incoorperating it in our website becasue it would lock out to much of our users.

Keep the project going as the script looks nice. Wouldbe nice to know if there is a fix for IE7 around (or am I overlooking an earlier posting ??)

GrTx!

Lead on August 03, 2008 at 1:39 pm

Hi,

Excellent script I really liked it.
I have a question:

Can I call this script like this:

<div id=”content”>
<script language=”javascript”>
showDialog(‘success’,'Testing Dialog Boxes’,'success’);
</script>
</div>

I’m trying to trigger the dialog box automatically instead of having to hit HREF or any other event.

Regards,
Pepe.

pepe ortiz on August 04, 2008 at 9:53 am

Michael,

For some reason, this line was tripping up the script when I implemented it:

dialogmask.style.height = content.offsetHeight + ‘px’;

The script hung up here, and would not continue processing the code (I discovered this because the box would not fade. After commenting out this line, it seems to work just fine. FYI.

Connor on August 06, 2008 at 10:28 pm

Hi, Congratulations, good job!
But, i think that there is someone bug in FF version 2. I tested with the version 2.0. and it didn’t work properly.

Eliel on August 08, 2008 at 4:06 pm

Neat and nice modal.

What to do to create a new modal when there is a modal in display? Parent-child modal type…

Thanks.

ken on August 12, 2008 at 1:47 am

@Lead – I was not aware of any IE7 issues. Shoot me an email with the details and I will look into it. Thanks for reporting.

@pepe – Sure you can call the function anywhere, not a problem.

@Connor – If you did not have the content div it would definitely blow up. Sorry I probably didn’t make that clear enough in my post.

@Eliel – Can you elaborate via email? Thanks.

@ken – The script isn’t really scripted currently to accommodate multiple popups. You would have to customize the script a bit to get it working. Definitely doable.

Michael on August 12, 2008 at 8:09 pm

Hi Michael, first off great scripts and thanks.
I would like to use both the custom alerts and the form validation but i am getting conflicts when they are both on the same page.

If i have the messages.js included first then the dialog_box.js the message is positioned badly (top of the page nowhere near the form input) but if i swap them then i get the message appearing correctly but the dialog/alert doesnt work and i get a JS error of offsetParent is null or not an object

any ideas? – i am not exactly gifted at JS ;)

Christophe on August 13, 2008 at 7:53 am

I love your dialog boxes. Thank you for the code. It is really well written and well done.

I did run into a small problem when integrating it into a page I am working on. The content area wasn’t quite as wide as the header area. This only happened in Internet Explorer. So I made a change in the dialog-content rule:

#dialog-content {display:block; height:160px; padding:6px; color:#666666; font-size:14px; width:411px; }

I added the “width:411px;” portion just like the dialog-header contains. This solved my problem.

So if anyone else has seen this, that is how I solved it.

Thanks again.

CyberCowboy on August 14, 2008 at 8:35 pm

All,

Can anyone try to call the dialog box in this way and let me know if it works for you. Just add the following to a new page. I’m having problems in IE not in firefox, IE shows a popup saying ‘cannot open the page and some errors code’

<div id=”content”>
<script language=”javascript”>
showDialog(’success’,’Testing Dialog Boxes’,’success’);
</script>
</div>

thanks a lot
Alejandro.

Alejandro on August 15, 2008 at 5:33 am

@Alejandro: I’m having the same problem. To fix it so that IE7 would not crap out, I built the script like this (kind of):

<div id=”content”></div>
<script language=”javascript”>
showDialog(’success’,’Testing Dialog Boxes’,’success’);
</script>

Taking the dialog part of of the div, but leaving the empty div on the page solved it for me.

bigga on August 16, 2008 at 6:40 pm

Update: I thought my trick worked, but now the whole page is not ghosted, just the top 50 or so pixels. The dialog still appears just fine, and IE does not give an error.

bigga on August 16, 2008 at 9:35 pm

Thanks a lot Bigga… I’m gonna try your suggestion.

Regards,
Alejandro

Alejandro on August 17, 2008 at 8:36 am

Thanks a lot for to share this excellent code with us !!

This make me remember Charles H. Moore (Invetor of FORTH):

“Keep it simple. A simple solution has elegance. It is the result of exacting effort to understand the real problem and is recognized by its compelling sense of rightness.

Simplicity provides confidence, reliability, compactness and speed.”

Congratulations!!

In time: Your dialog box is perfect to include an iframe as the “message” parameter extending the usage of that to the limits of imagination…

Rubem Dickie on August 17, 2008 at 10:56 pm

Bigga,

I tried the code fix mentioned by you, but it didn’t work still show the error message, any other ideas?

Thanks a lot
Alejandro

Alejandro on August 18, 2008 at 6:24 am

I ran across another ‘glitch’ with IE 7. For my page the pageHeight() calculation comes out as the height of the client area of the window and not the height of the document. So for long pages with scroll bars, the bottom part isn’t washed-out into the background. I did a little research on the window.innerHeight property (http://www.howtocreate.co.uk/tutorials/javascript/browserwindow) and saw the reason for the code you wrote. I made following change that solved my problem. I take the max of all three values as the pageHeight so that it should get the document height in all cases (atleast those I tested). So here is the code:

// calculate the current window height //
function pageHeight() {
var height1 = (window.innerHeight != null) ? window.innerHeight : 0;
var height2 = (document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight : 0;
var height3 = (document.body != null) ? document.body.clientHeight : 0;
return Math.max(Math.max(height1,height2),height3);
}

Again, well done. This is a great tool.

CyberCowboy on August 19, 2008 at 4:02 pm

thanks a lot.
I have a question. when the dialog box pop out above flash file. it seem like the flash file will overlap it.
Could anyone help me to solve this question?

adamhut on August 21, 2008 at 1:08 pm

@Christophe – Did not realize there was conflict. You probably just need to rename some variable or function. Shoot me a link and I can figure it out real quick.

@Rubem – Thank you for the encouraging feedback.

@CyberCowboy – Thanks for the feedback. Will look into it.

@adamhut – Look into the wmode=”transparency” attribute for your swf.

Michael on August 24, 2008 at 9:05 pm

I also have problem with the line
dialogmask.style.height = content.offsetHeight + ‘px’;
it seems the content is null. I have created div in my page but still I cannot get rid of the error.

Meroko on August 31, 2008 at 7:28 pm

Hi guys,

I’ve been also running on this IE6/7 annoying bug: “Internet Explorer cannot open the Internet site… operation aborted”.

I’m not very keen in JavaScript but I tried to isolate the problem and I think it’s that you call the showDialog function before the dom is loaded entirely.
So if I add “$(document).ready(function(){showDialog(“ I’m not sure if it is the most elegant solution… but it is working though. :)
Here you can see the working example: http://fuedo.com/ftp/dialogBox/works.htm
And the NOT working example: http://fuedo.com/ftp/dialogBox/breaks.htm

P.S. This is solving one positioning problem that appears in opera, as well.

Hope it helps.
Regards
Yordan Stoev

Yordan Stoev on September 02, 2008 at 12:47 am

Thanks a lot,
I’ll definitely try it.

Cat Michaels on September 02, 2008 at 5:36 am

I have test it all modern browsers in Linux and Windows and works perfectly¡ In IE 6 just change the width of the #dialog with a hack ‘ _width: 431px’

Thanks¡ I really like it

Omar on September 02, 2008 at 7:59 am

O muito bom o trabalho, só que o de confirmação não esta funcionando, não aparece os botões de sim ou não ou coisa similar, mesmo no demo no site também não esta funcionando, testei no IE e no FF e esta da mesma forma, de qualquer forma, obrigado pelo compartilhamento do arquivo.

Diego Calazans on September 26, 2008 at 4:57 am

hi,
Im doing the following in the head tag. My question is how do i pass my errors/error_msg variable to showdialod function after the break.
<script type=”text/javascript”>
function form_validate(){

var error_msg=”";
if ((document.firstname.value.length==0) ||(document.firstname.value==null)) {

error_msg= error_msg+”Please enter first name”+”<br/>”;
}
if( error_msg.length!=0){

alert (“error_msg;”)
showDialog(‘Error’,'You have encountered a critical error.<br>’,'error’);

}

}
</script>

thx,
s

s on September 29, 2008 at 4:32 am

Hi there,

First of all you don’t need this semicolon on the alert and no quotes as well so you have something like:
alert (error_msg);
Also you have to replace all weird quotes like: ” or ’ with normal like ” and ‘
And you can pass the error message with concatenation “+”
showDialog(‘Error’,”You have encountered a critical error.<br />” + error_msg ,’error’);

Hope this helps!
Regards Yordan

Yordan Stoev on September 29, 2008 at 10:52 am

thx, yordan, it works.. i have one more quick question,,
error_msg= error_msg+”Please enter first name”+”<br/>”;
the break tag doent create a new line for me neigther does \n . This more of javasript question i think.. but how do i add a new line or break after say first name.. thx, much.
s

s on September 29, 2008 at 4:03 pm

Hi there and thanks for this great script!! :)

I need to know how to use the script to alert about the use of Internet Explorer.
I want to recommend the visitors to use firefox or other better than IE, i´m a newbie and i need to know the code to call and so on.

Thanks in advance.

Best regards,

jopicar
——————
<a href=”http://blog.jopicar.com>TELARAÑA</a>

jopicar on October 02, 2008 at 10:26 am

This is great stuff vs the plain vanilla alert and confirm dialog boxes. Truly Great Job!!! Glad i found this site.

The only problem i am facing is with prompt box.
I inserted the following code in the showDialog javascript code (lets called it @A) (code which Michael had suggested)
if(type==’prompt’){
messageOption=”<br/><br/><a href=’#’ onclick=’responseFunction(1);hideDialog();’>Yes</a><a href=’#'”+
” onclick=’responseFunction(0); hideDialog();’>No</a>”;
dialogcontent.innerHTML = message+messageOption;
}else{
dialogcontent.innerHTML = message;
}

and in my javascript (lets called @B) i am using
var returnResponse=showDialog(‘Confirmation’,'blah … Do you wish to continue?’,'prompt’);

Now, When my javascript code (refer @B) is called then the control donot wait for the response from the prompt but execute the code completely after which dialog box is open. Is it happening to me only?

Will appreciate the solution to above. I am using prompt very heavily.

Thanks In Advance

Ajay

Ajay on October 08, 2008 at 4:15 pm

Hello! It’s great script !!! :) I have a question. How i can include the external file in dialog boxes? Sorry for my english & thanks.

MuraDweb on October 21, 2008 at 6:12 pm

Great work!
Could you add a class to the div ‘dialog’:
$(dialog).html(…).addClass(‘modalDialog’);
and modify the css to:
.modalDialog .error {…}
in order to prevent the collision with the ‘.error’ class of jQuery Validation Plugin (http://plugins.jquery.com/project/validate) ?
Or may be they must do the change :)
Thanks!

Niko on October 25, 2008 at 12:23 pm

Very nice. How can you customize it so it can work like the confirm dialog in JS?

Tarek on October 29, 2008 at 12:59 pm

Just perfect! love the simplicity!

Indy on November 02, 2008 at 4:51 am

At you the excellent site, a lot of useful info and good design, thank.,

Renita on November 04, 2008 at 12:07 pm

exelente la ilustracion ,, hey pero no escriban en ruso pq muy dificil hombre jeje

galax on November 07, 2008 at 12:38 pm

Hi,
someone have and a example with confirms?

fetishcode on November 11, 2008 at 1:36 am

Hi,
Its very nice.
But i had a problem
I was using the java script function as
Response.Write(‘<script type=”text/javascript”>javascript:showDialog(”Confirmation”,”Are you sure you want to delete the entry?”,”prompt”);</script>’);
But i can’t get the dialog box.

Bharat on November 15, 2008 at 8:16 am

Great work, Michael. How to make it work as alert() or confirm()? Unfortunatelly, when you running your functions it not pausing the javascript, alert() or confirm() will pause the script until you click to confirm

Andrey on November 16, 2008 at 11:10 pm

i don’t see a way to input data in a way similar to prompt..for example, I want to prompt “Please enter name” and have a box they type their name in…will this work with your example?

Mark on November 19, 2008 at 10:18 am

good job!
function show_confirm(url) {
showDialog(‘Prompt’, “Continue?<br /><br /><a href=’” + url + “‘>Yes</a> <a href=’#’ onclick=’hideDialog()’>No</a>”, ‘prompt’);
}

topmint on December 23, 2008 at 8:59 pm

Sorry for the long winded msg – I also sent email but maybe the community can help:
I like your Custom Javascript Dialog Boxes very much. They look so much more professional than the sterile generic alerts/confirms. I’m having no problem on pages that are not long enough to have a scrollbar, but I’m having big problems with keeping the current scroll position (as the generic alert does – but that’s controlled by the browser). I’m especially having problems with cross-browser consistency. I’ve made some changes to the routines that get the full page height/width to get rid of the FireFox bitch about some of the methods used (get<somethingorother>Box…), and that was successful, producing the same results (or at least consistent with their prior behavior) in each browser – MSIE, Firefox & Safari. Here’s the current status:
:note: I’m setting focus() on each field in error before calling your routine.
- Safari positions the alert box right on top of the field in error (actually too accurately – covers the error field), but snaps to the top position of the page. You have to scroll down to see the error.
- Firefox does about the same, but positions the box higher (about 75-100px).
- On a long/scrolling page, messages displayed when at the top baseline of the page are mostly off the page, except for the header bar & a couple of extra pixels (Safari & Firefox).
- MSIE works perfectly, except the filter alpha issue.
- I’ve removed the use of the wrapper, for cross browser support & experimenting to see if that was causing the problem. I also had to change the name of the wrapper (which worked ok) since a programmer already declared a CSS class “content”.

I’ve tweaked the box itself (since I got tired of trying to resolve the scroll issue) – included Close, Yes, No img’s in Gimp, changed the size, font size/bold, etc. Now it looks a lot better, but it still shows up in exactly the same spot in each browser.
I read on your site that another user was having the same issue. Is there a workaround? In the meantime, I’ll keep trying a few things.

Also, if any of you all need examples/images/code on the inner content of the dbox, just send me email to my disposable gmail account mosrite1234@gmail.com.

Michael Condon on December 31, 2008 at 1:32 pm

I love this.

Looks great, comes in HANDY!

Only problem I have is that the modal background doesn’t show…
any ideas?

keep up the great work and THANKS!

Dustin on February 03, 2009 at 6:55 pm

I love the design. Good work!!, but, I’m having a problem with this. Whenever I enter a message with an apostrophe, test the code, and try to open the box, it doesn’t open. Once I remove the “‘”, it works again. Is there anyway I could fix this? Thanks. (I love your site! It’s helped me a lot, and it has some great codes!)

Dave on February 04, 2009 at 7:07 pm

Hello mister, please would you help me because i want to use your javascript dialog boxes but the only thing i’m capable of is to make the background turn white but the dialog boxes won’t appear. The images folder is at the right place and the links seems to be too… what should i be looking for? (sorry i speak frenche normally) Thank you very much,

Édouard Monet on February 07, 2009 at 12:39 pm

I to only see the white-wash. No dialog box. Is there any specific reason for this?

Shawn on March 02, 2009 at 11:02 am

In Internet Explorer 6, this script gets hit with the “Internet Explorer is blocking this” (ydaa, yada, yada). This is EXTREMELY frustrating and only happens when you start editing the file. What in the world is going on here? I can’t release this to my site because people would keep getting that dumb message.

Nick on March 03, 2009 at 9:20 am

There were several complaints in the comments that only a “white wash” appears. This is due to the fact that the variable called WRAPPER should contain a valid id of a div or similar element which contains the page content.
To avoid this, either put a valid value there, or add this one line in the source, right after line 85 (var content = document.getElementById…):
if (content == null) content = document.body;

Vanco on March 08, 2009 at 4:40 am

custom-javascript-dialog-boxes’s js is not a real dialog.But it’s clever.

qiu on March 09, 2009 at 3:11 am

thanks you for sharing

punqie on March 18, 2009 at 11:49 am

Hi

Firstly, thank you for sharing the great code libs. I am easily able to test it and are working. However, I see a minor issue, the reason I am unable to find, maybe some of you know the reason.

The dialog boxes are not displayed correctly in IE 6.0. ie., the right side border has gone inside a littlebit say about 5-8px.

Its working/displaying correctly on FF. Any clues. Could someone pl help me.

Thanks

Yuva on March 19, 2009 at 4:17 am

Hi All,

W.r.t my previous mail, I added the following code to the JS file and now I see no issues.

if (navigator.appName.toUpperCase().match(“MICROSOFT INTERNET EXPLORER”) != null)
{
dialog.style.width=”431px”;
}

Thanks to Omar’s comment dated 2nd Sep 2008.

Yuva

Yuva on March 19, 2009 at 5:18 am

Thanks for sharing. Simple and clear … I like it…

Marton on March 19, 2009 at 3:57 pm

You should release this as a .net user control. It would really come in handy ;)

Bill on March 19, 2009 at 6:30 pm

I saw a minor issue ie., in IE 6.0, we have this problem with select box. I added this piece of code to hide the select box and now the select box is not displayed…hope this info helps someone.

if(navigator.appName.toUpperCase().match(“MICROSOFT INTERNET EXPLORER”) != null)
{
var e = document.getElementById(statuslist’);
e.style.visibility = ‘hidden’;
}

More info, pl refer to Juliano’s comment on 25 Apr 2008, and other comments here.

Yuva on March 26, 2009 at 7:09 am

Jus to add more info, after setting to hidden, when the dialog box is closed, I reset the visibility to ‘visible’. There are some more suggestions/options that we chose to handle this, and I opted this because anyway I am capturing/working with this attribute.

Thanks.

Yuva

Yuva on March 26, 2009 at 7:16 am

Hi, i have been seeng some delays when my dialog box is about to apear and dissapear. I’ve created a <div> right after the <body> and included everything into my validation .JS files. Any suggestions??

Rene on April 01, 2009 at 3:38 pm

Hi, im wondering if these messages box could be openned without using <a href> tag? Actually i have a username and password field in a form, and in my php file i want to show a message if user/pass is correct or not :

if($data['passwrd'] != $pass) {
?>
<script>alert(‘Wrong Login or Password’)</script>
<?

This is works good, but i want to use the nice message box instead of Alert() command, thanks for your help…

mimim on April 06, 2009 at 8:46 am

Vanco, thanks a lot for that hint! I was completely stuck reading everything and no success..
Now it works!
Thanks!

Lego on April 06, 2009 at 8:09 pm

Nice read and nice java.

Jeff on May 04, 2009 at 7:55 am

Hi. Thanks a lot for your project. It is very useful! :D
I have a request about it. Is it possible to move the little window in the window browser or it is not possible? How can I do it? Can you resolve it?
Thanks.

Giampiero on May 06, 2009 at 3:29 am

I realized it!
It is possible a merge with another javascript code. You can find here http://giulio.ganci.eu/2008/07/21/drag-and-drop-con-javascript/

How to use it:
- include Giulio Ganci’s javacript code into the web page
- on the text write this: <a href=”…. javascript:PassaParametri(par1, par2, …)….>
- write a javascript function:
function PassaParametri(par1, par2, …){
showDialog(par1, par2, …);
Drag.init(‘dialog’);
}
dialog is the div id of the Dialog box.
It works! Enjoy it!

Giampiero on May 08, 2009 at 5:05 am

Great stuff!!!

Just one stupid question:

If you use the prompt option, how can you enter a yes or no link to the box…

Gijs on May 20, 2009 at 10:48 am

Just found this site today. I am trying to use ‘prompt’ to confirm if document should be deleted. Not sure how to get the reply values (Yes/No)to display in the box. Very new to javascript. Do you have an example

mike on May 27, 2009 at 9:59 am

Ну и что, есть результат ?

Максим on May 27, 2009 at 10:12 am

Thanks so much for this script, I am going to use it on some of the projects I am working on. Much more lightweight than thickbox or lightbox. Awesome work!!

matthew on May 29, 2009 at 1:46 am

@Michael,
Could you write the current code with other suggestions and fix finally please?

ofk on June 10, 2009 at 10:45 am

This is a GREAT script but I have one problem… Is there a way to make the box and overlay close when ANY click is made anywhere on the overlay instead of only if the "X" is clicked on?

Rob on June 15, 2009 at 6:50 pm

This script is great!
thank you very much for sharing this.

David Wu on June 16, 2009 at 10:38 pm

Actually I found a minior but very important issue for this js. This js is great but it can't act as the common alert or confirm can hold the parent thread suspend there. (after user make choose then resume the parent thread). This js will execute the code below after showing the dialogbox. This break the rule if user using it as the window.confirm() usage. and the confirm can't return value. Of course you can register callback. But it's a little hard to continous the original code position.

Hector Zhang on June 27, 2009 at 7:45 pm

Great work man!. Thanx for the share.

Spikyangel on July 10, 2009 at 5:05 am

Can you do a plugin for wordpress, which would replace all other JS dialogues? Thank you (Sorry, I don't speak english)

bengo on July 13, 2009 at 5:42 am

Greetings community, I do not speak English well and use the help of Google. XD.

I would like help from the experts, I have taken the example JavaScript Dialog Boxes and I am adding a picture in it. problea is that the image is large and growing but the dialog box-header not. someone can tell me to grow as ago as it automatically makes the dialog.?

Aqui esta el problema..????

#dialog-header {
display:block;
position:relative;/*Controla una parte del texto*/
width:780px;/*aqui estaba el meollo*/
padding:3px 1px 7px;/* Alto-ancho debarra-alto y rebose*/
height:14px;/*controla rebose de lineas*/
font-size:14px;
font-weight:bold
}

Jherssonny on July 30, 2009 at 3:11 pm

Seriously this would rock SOOO MUCH MORE if there was an easy way to have buttons (at the very least there should be an OK/Cancel default set).

BoD on August 23, 2009 at 3:52 pm

Ok, I am starting to tear my hair out here. How hard can this be?

Basically (like a lot of other people), I would like to use the prompt dialogue box.

On my page I have a hyper link and if the user enters a correct password it will direct to that page. I used an onlclick=return showdialog…. in the a href code. But for the life of me I can not get it to work. Doing it this way, as soon as the user clicks the link it directs to the page and does not display the dialog box.

I do have it displaying the the password prompt field (using html code).

Can anyone help? Michael?

Darren Line on August 24, 2009 at 9:02 am

I think my request is similar to Jherssonny's. Some of my messages are very long and I would like the alert window to have a verticle scroll bar. Any advice for a javascript beginner?

Steve on August 24, 2009 at 2:26 pm

Hi! I`m Skeef from Ukraine!
Excellent script, good job!
However, I faced a problem: I could not change the background color in the #dialog-mask layer (#dialog-mask background-color in CSS) in any browsers – Opera, Mozilla etc.
To resolve this problem want to change the symbol `-` to `_` in all the names:
#dialog-header changed to #dialog_header
#dialog-title -> #dialog_title
#dialog-close -> #dialog_close
#dialog-content -> #dialog_content
#dialog-mask -> #dialog_mask
and also change the names in dialog_box.js
Once again, thank you. Sorry for my english :)

skeef on August 26, 2009 at 8:50 am

Hi All, I need the same concept, thanks a lot for sharing. But a small modification, i need custom buttons on that. Can anyone help me out please. I am unable to add that stuff in the JS file. Can any one help me out. And send me the code will be much more appreciated. My Id prasanth_2955@hotmail.com. Please i Need it.

Prasanth on August 31, 2009 at 8:36 am

Ah, I have only ONE word: PERFECT!

SomeNerd on October 02, 2009 at 2:36 am

very nice script.Thanks for sharing.

engin on October 04, 2009 at 12:50 pm

Man, your script is truly great ! But i need a help… i downloaded to the form validation script… before showing the messages at the side of the inputs I used the function alert to show that the person make a mistake in the form… well, but the alert is ugly (hehe), then in the html page I included this script and then in the place of the alert in the another script I called the function showDialog()… the problem is that it's not working… what should I do ?

Leo on October 15, 2009 at 10:21 am

I need something like this that works with the onbeforeunload event to trigger a prompt when someone tries to leave the page. Has anyone tried this before?

Ryan on November 03, 2009 at 4:36 pm

Thank you very much for your dialog boxes. It's really cool enough to modify and add a functionality to it. It

Samiev Suhrob on November 07, 2009 at 5:16 am

Hi, thanks for the dialog box, was what I needed.

Marcela on November 19, 2009 at 10:32 am

Hi Michael,

First of all I would like to appreciate your effort on putting up these awesome custom dialogs for free use! I have been searching a hell of a lot, but this is one of the best I have seen! Kudos to you!

I am trying to use these dialogs for an intranet site I am building. These dialogs are being invoked on pages whose height vary. I guess your script is calculating the browser window height before displaying the dialog. However, my page content (page height) varies based on the number of records I am pulling up (as the requirement does not want the records to be paginated). Therefore, if there are say 100 records, it might show up in 3 pages.

My concern is that when the dialog shows up, the background appears locked out, but when the page down key is pressed or if I scoll down using the browser's vertical scrollbar, the remaining part of the page is accessible, inspite of the modal dialog being visible!

Kindly help!

Dr. Trevor on November 27, 2009 at 6:50 am

I've Taken Note of several user's comments in this blog and have released an upgraded version of the dialog to here: http://www.vuware.com/dialog/dialog_new.zip.

I've listed all the Fix's and Changes below. I've also included a minified version of the file, compressed with YUI Compressor which is 5215 bytes.

// Fix 1: Use an <iframe> for the mask to cover <select> elements in IE <8
// Fix 2: Replaced hyphens with underscores in CSS class names
// Fix 3: WRAPPER should contain a valid id of a div or similar element which contains the page content

// New 1: Added support for standard and user-defined buttons
// New 2: Added support for width and height, (user-defined, default and auto)
// New 3: Added support for open-dialog-at-cursor
// New 4: Added support for non-modal dialogs
// New 5: Added support for click-background-mask-to-close
// New 6: Added a DLGRESULT variable set to true or false depending on which button clicked

// ToDo: Fix the 40 pixel hack to set the correct mask height, (have no idea why?)

// width/height = null : Default Size
// width/height = 0 : Auto Size to contents

// buttons == 0 : No Buttons
// buttons == 1 : "Ok"
// buttons == 2 : "Yes"/"No"
// buttons == 3 : "Accept"/"Cancel"
// buttons == 4 : "User defined 1"/"User defined 2"

Ratty on November 27, 2009 at 7:06 am

To Dr Trevor: The Update I posted fixes that issue

Ratty on November 27, 2009 at 8:10 pm

There is an upgrade to my upgrade of the dialog script now available here:

http://www.vuware.com/dialog/dialog_new.1.1.zip.

The minified size is now 4484 bytes.

Ratty on November 28, 2009 at 3:55 am

Yet another upgrade of the dialog script is available here:

http://www.vuware.com/dialog/dialog_new.1.2.zip.

See forum posting for more details:
http://forum.leigeber.com/topic/28-v1-2-upgrade-to-dialog-box-now-available/

Ratty on November 28, 2009 at 8:41 pm

Sorry folks I had to release a bug-fix upgrade of the dialog script.

You can download it from here:
http://www.vuware.com/dialog/dialog_new.1.3.zip

See forum posting for more details:
http://forum.leigeber.com/topic/25-upgrade-to-dialog-box-available/

Ratty on November 29, 2009 at 9:17 pm

Hi,

Very nice script.

Would have an example of how to use the prompt?
Thanks for sharing.

Carlos on December 01, 2009 at 10:46 pm

***IMPORTANT: the following explanation actually requires that DLGRESULT be set to null in "showDialog()" so that you can check for a TRUE or FALSE result. Unfortunately, I forgot to do it… v1.4 will be out tomorrow.

To Carlos:
————-
Actually getting your javascript code to mimic the behaviour of the built-in javascript "Confirm()" dialog requires some thought and careful programming.

Basically, any call to the "showDialog()" function will return immediately regardless of whether or not the user has clicked a button. The blocking behaviour of the built-in "Confirm()" dialog is hard-coded into the browser's internal behaviour and cannot be duplicated directly in javascript. Instead, you must split any functions that require some user input into two parts. The first part launches the dialog and then calls a delayed handler function.

eg "SetTimeout('myHandler()', 100);

The "myHandler()" function then checks the state of the global DLGRESULT variable defined in "dialog_box.js".

eg.
if (DLGRESULT == null) SetTimeout('myHandler()', 100);
else {/*process the result*/}

Ratty on December 02, 2009 at 9:20 am

v1.4 bug-fix upgrade of the dialog script.

You can download it from here:
http://www.vuware.com/dialog/dialog_new.1.4.zip

See forum posting for more details:
http://forum.leigeber.com/topic/25-upgrade-to-dialog-box-available/

Ratty on December 02, 2009 at 9:31 am

How do I capture the button they push.
Do action if button1 clicked, Do action id button2 clicked?

Print Button1 clicked
Print Button2 clicked…

Stone on December 03, 2009 at 5:39 pm

When set on Body Onload it does not grey the background. When run from button or link seems to work fine.

CSS for backgroup gray out?

Stone on December 04, 2009 at 9:12 am

To Stone:

1) I think I might have to extend the dialog to allow you to determine which button was pushed.

2) I will have to investigate the onLoad issue further. Can you send me an example html file thanks?
(Please add it to the corresponding forum entry: http://forum.leigeber.com/topic/25-upgrade-to-dialog-box-available/)

3) I'm off to Tokyo Disneyland for 3 days, so I won't be doing any coding until after then :)

Ratty on December 05, 2009 at 7:15 am

I have question. Its very nice. But i want return to parent page, which action user cliked.
Some one can help me in this please.

KK on December 10, 2009 at 5:11 pm

Looks nice. A minor problem though:
* make a dialog
* resize the browser width to almost noting.
* Scroll to the bottom of the page. The mask div doesn't cover the whole page anymore and the user will be able to interact with the background page although the dialog is still showing.

Jonatan on December 11, 2009 at 6:25 am

v1.5 released see forum entry: http://forum.leigeber.com/topic/25-upgrade-to-dialog-box-available/)

Ratty on December 14, 2009 at 4:48 am

Excellent work, and thank you so much for making this available! It's exactly what I need for one of my projects, is easy to implement, works great, and looks terrific.

Madeline on January 04, 2010 at 4:08 pm

The only thing it's missing is buttons (OK, Cancel, etc.). Is there a code I can slip in there to create some?

Justin on January 12, 2010 at 4:01 pm

To Justin:

Excerpt from the Forum Posting:
http://forum.leigeber.com/topic/25-upgrade-to-dialog-box-available/

// buttons == 0 : No Buttons
// buttons == 1 : "Ok"
// buttons == 2 : "Yes"/"No"
// buttons == 3 : "Accept"/"Cancel"
// buttons == 4 : "User defined 1"/"User defined 2" (button 2 is optional)

Ratty on January 14, 2010 at 6:34 pm

Download Link was probably dead for the past week… DNS issues.
Should all be ok now

Ratty on January 14, 2010 at 6:36 pm

Good day, i need help.

I would like to use the tool, the dialog_box.html works fine on my local.
But i would like to incorp on my site.

I have an xslt file loading aspx page but i keep on getting the error object required
<link rel="stylesheet" type="text/css" href="./codebase/dialog_box.css" />
<script type="text/javascript" src="./codebase/dialog_box.js">
<xsl:value-of select="' '"/>
</script>

i removed the <xsl:value-of select="' '"/> but still smae error.
All my other js files are located in the codebase folder.

<input type="button" value="Save List Item" onclick="javascript:showDialog('Warning','You must enter all required information.','warning');"></input>

not to sure what i'm doing wrong.

Does anyone perhaps a later version where there is an ok button.
Please mail me (ismailc@parmalat.co.za)

Thanks the tool looks great – if only i can get it working

ismail on January 18, 2010 at 5:17 am

Hi, Got it going but my message box has the top line width is out not a perfect box
?

ismail on January 18, 2010 at 7:58 am

running an old version of javascript be a problem. javascript1
the site has version6

ismail on January 18, 2010 at 8:13 am

Thanks – this is great, certainly the best i've seen
Comment: "I added the “width:411px;” CyberCowboy
sorted out my prblem with header being wider than the body
I must try to get a button now :)

ismailc on January 18, 2010 at 1:24 pm

Great tool!

One issue I ran into: the dialogs were displaying as they should in Firefox, but they were missing the bottom border in IE.

It turns out that this is because I was using IE in a standards compliant mode. There is code in the dialog tool which compensates for non-standards mode IE, but which screws up the dialog in strict mode.

It's very easy to fix (I added a constant to the JS file which, when false, would prevent the IE detection from working by short-circuiting it a couple of lines below).

Anyway, this just in case anyone else has the same problem.

zwot on January 21, 2010 at 3:49 am

v1.6 released see forum entry: http://forum.leigeber.com/topic/25-upgrade-to-dialog-box-available/)

Ratty on January 21, 2010 at 7:25 pm

To Ismail:

Have you looked at Zwot's posting? This may be the source of your problem.

I know its still not a perfect script, (and probably never will be), but I will take a further look at Zwot's report.

(If Zwot has anything to add regarding the standards mode issue, please feel to elaborate further).

ps. We really should be having this discussion on the forum (http://forum.leigeber.com/topic/25-upgrade-to-dialog-box-available/)

Ratty on January 21, 2010 at 7:32 pm

Hi, I downloaded the latest version because not all the main content woul be covered by the mask in IE7 from site. Now I have the modal = true but it does not seem to work nicely. All contents fit within page but with mask displayin all of the window it add scroll bars? how do i fix? :(

ismailc on January 24, 2010 at 12:44 pm

To Ismail:

Make sure your DocType is set the same as in the example

Ratty on February 10, 2010 at 7:39 am

I noticed heavily on the yes/no question and I was thinking cant you add a example that displays yes/no and when the person checks on the one needed the main page show what he pressed. I believe that would answer all the notes of people asking for this.

By the way nice work!!

Geofrey on February 10, 2010 at 3:07 pm

Hi, great script, I'm using the Set AutoClose Time and Hide Close Buttons pop-up and I'm trying to figure out how I make it redirect to another page after the AutoClose has completed so after the 5 seconds has elasped. I understand the concept of using

window.location("http://www.url.com","mywindow")

but I'm not sure where to put it in the jquery.modaldialog.js script or if I should create a new funtion and then call that function in the link: <a href="javascript:$.modaldialog.success('', { timeout: 5, showClose: false, title: 'How does this work?' });">How does this work</a>.

Any help would be really appreciated thank you.

James

James on February 14, 2010 at 6:54 pm

I have a problem with the combo-box, not disabled when displaying messages. Does anyone know how to fix it?

Teresa on February 15, 2010 at 9:10 am

I think some of these questions have already been answered in the corresponding forum postings. Please check there first and post any further questions and comments there please.

There's also a fully coded advanced working example posted there too.

http://forum.leigeber.com/topic/25-upgrade-to-dialog-box-available/

Ratty on February 22, 2010 at 6:04 pm

I have modified a row in the source of this wonderful dialog box downloaded from ratty:
dialogbar.innerHTML = '<button type="button" onclick="hideDialog(1);" id="btnOcchei">'+button1+'</button>';
i've added an id;
then at the end of the function showdialog i've added this line
if( buttons == 1 ) document.getElementById( "btnOcchei" ).focus();
so the button takes the focus and the user may use spacebar or enter to close the dialog box
I hope it will be useful for you all
many thanks
jgurl

jgurl on February 26, 2010 at 7:48 am

Very elegant and professinal dialogs. Amazing work !

Indra on May 06, 2010 at 2:08 pm

[b]Hi I have a very basic question Pls Some body help me.
Iam really strugling

Once the user clicks in the button Eg Confirm button 'yes'.

how will the page know that this button have been clicked?

Without knowing that Iam unable to implement the whole thing.

Example:
Iam going ask user do you want to delete ? If yes is clicked i want to delete some thing in the database.
How will i know in the page this button is clicked.
I cant even find one example of that.
Iam using ASp.net

Thanking you in advance[/b]

MeS on May 11, 2010 at 7:26 am

hey MeS this is the solution ur looking for. Btw you must edit on the dialog_box.js on the line: 406 change it to "if ( buttonId >= 1)" since the version 1.6 closes the box when click outside. Basicaly skipping answering the question.
function AskQuestion()
{
var msg='<p>my message</p>';
showDialog('Confirmatión',msg,'prompt', 0, 0, false, false, true, 3);
setTimeout("ObtainSelected()",100);
}

function ObtainSelected(tag)
{
if(DLGRESULT!=2)//this is no
setTimeout("ObtainSelected()",100);
else if(DLGRESULT==1)//this is yes
{
//process value
}else //clicked out side.
{}
return;
}

Geofrey on May 25, 2010 at 3:03 pm

Hi! I didn't realise a more advanced version was already made so I made one yesterday that allows 0-n prompt lines plus text input, in order to gather data, and 0-3 configurable buttons, it auto-sizes its height, accepts enter and escape keys, centers itself properly, and calls a javascript callback function to process your inputs further. Drop me a mail if you want the demo.
Script size with doc 9k, compressed/packed 3255.
Good work!!
Dennis

Dennis on May 27, 2010 at 5:18 am

Excellent! Thanks very much.

wonfewy on June 11, 2010 at 11:33 pm

The script is behaving weirdly in my system… the dialog box occurs but it doesn't show any image and the other thing is if i put an alert in the script then the dialog box shows the image which are accessed thru the css..but nice script kindly help me out with this problem

Karun Singh on June 26, 2010 at 4:11 pm

Hola!
probé este recurso con la ayuda de nuestro amigo Vku y funcionó! Es muy lindo y elegante.

Ahora pregunto: no se puede poner algún código como para que la ventana se abra mientras esté el CURSOR SOBRE el ENLACE y luego al sacar el cursor, desaparezca automáticamente?

Leí los comentarios, pero creo que esta consulta no estaba.

Muchas gracias desde ya!

Hogar Crecer on July 08, 2010 at 12:23 pm

Fantastic, but I have problem when I try to show the dialog box at the page startup with the following script:

<script language="javascript" type="text/javascript">onload=showDialog('Warning','You must enter all required information.','warning');</script>

( in body tag ) what's wrong ?

Michel Kogan on July 09, 2010 at 4:07 am

I fixed my problem with the following script:

<a href="javascript:showDialog('Error','You have encountered a critical error.','warning');" style="display: none;" id="link">Error</a>
<script type="text/javascript">

var theEvent = document.createEvent("MouseEvent");
theEvent.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
var element = document.getElementById('link');
element.dispatchEvent(theEvent);

while (element)
{
if (element.tagName == "A" && element.href != "")
{
if (element.target == "_blank") { window.open(element.href, element.target); }
else { document.location = element.href; }
element = null;
}
else
{
element = element.parentElement;
}
}
</script>

Michel Kogan on July 09, 2010 at 5:12 am

Thank you very much for this script. It works wonderfully and saved me alot of time.

Kye Etherton on July 12, 2010 at 9:48 am

Check this!!
http://trentrichardson.com/Impromptu/index.php

Cipher on July 13, 2010 at 4:08 am

Hai,
I just tried it out.But it is always showing an error "content is null" is mozillas error console and pointing to "dialogmask.style.height = content.offsetHeight + 'px';" in dialog_box.jsp file.. so alert is not at all coming .please help

priya on August 11, 2010 at 2:08 am

Thank you for that great solution. Looks pretty good!

Maik on August 17, 2010 at 1:43 pm

Hola Michael,

Gracias por el aporte, yo he realizado algunas modificaciones, agregando botones, y algunas otras utilidades, no solo lo he usado para mostrar mensajes sino como formularios y cree una funcion, para cambiar el tipo de acuerdo al resultado ej. successheader, errorheader.

Lo utilizo con ASP .NET y JQuery y funciona perfecto, hago el llamado de la funcion a través del scriptManager.

En IE 6.0 hay un error, cuando llamo a showDialog desde el servidor y nos desde el cliente la ventana intenta crearse antes de haber creado todo el DOM. pero lo he resuelto creando los div estaticos. Muchas Gracias por compartir esta maravilla con todos nosotros.

Mauricio Orozco on August 20, 2010 at 9:40 am

Trackbacks

Comments are closed at this time.