Custom JavaScript Dialog Boxes

22
Apr

Posted by Michael in Design, JavaScript

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.

The script is tested working in IE 6/7, Firefox 2/3, Opera and Safari. It functions in IE8 but not 100% correctly due to the lack of a the alpha(opacity=xx) property. Hopefully it will be added before it leaves beta.

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.

View the demo.

Download the source.

3 Diggs

57 Responses

[...] Исходный текст(английский) [...]

Легкие диалоговые окна — Чернев.ру on 23 Apr 2008 at 6:58 am

Very good!!!
Thanks for sharing your work.

Christian Olivares on 23 Apr 2008 at 7:06 am

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 23 Apr 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 23 Apr 2008 at 8:32 am

well, I gonna test and see if it can compete with Thickbox (Redux)

cu, w0lf.

fwolf on 23 Apr 2008 at 11:24 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 23 Apr 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 23 Apr 2008 at 3:41 pm

[...] можете скачать эту библиотеку на сайте Майкла Лейгебера. Категория: JavaScript librariesАвтор: Spider Дата: 23 Апрель 2008 [...]

Настраиваемые окна на Javascript | АяксЛайн.ру on 23 Apr 2008 at 4:01 pm

[...] Encosia. Категория: AJAX, ASP.NETАвтор: Spider Дата: 23 Апрель 2008 Время: [...]

Особенности использования UpdatePanel | АяксЛайн.ру on 23 Apr 2008 at 4:04 pm

<strong>Custom JavaScript Dialog Boxes…</strong>

Custom JavaScript Dialog Boxes…

roScripts - Webmaster resources and websites on 23 Apr 2008 at 6:15 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 24 Apr 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 24 Apr 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 24 Apr 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 24 Apr 2008 at 10:12 pm

[...] to inform the users the status of the system. Leigeber has put together a lightweight (~4.5kb) JavaScript dialog box library. The script currently offers four dialog styles: alerts, warnings, prompts and [...]

Glamour’s Blog » Blog Archive » Custom Javascript Dialog Boxes with 4 Styles - 迷人的美.魔术般的魅力.这就是Glamour… on 25 Apr 2008 at 2:00 am

very good!thanks

volkan senturk on 25 Apr 2008 at 7:28 am

[...] http://www.leigeber.com/2008/04/custom-javascript-dialog-boxes/#comment-95 You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. [...]

java script diolog boxs tasarımları güzel :) - Volkan Şentürk on 25 Apr 2008 at 7:30 am

thank you

komik on 25 Apr 2008 at 8:07 am

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 25 Apr 2008 at 8:17 am

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

Michael on 25 Apr 2008 at 8:33 am

[...] Here you can look at 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. [...]

CSS-FAQ » Blog Archive » JavaScript dialog box library on 25 Apr 2008 at 9:39 am

ever thought of translating it into a jQuery plugin?

If you haven’t, pls give some thought on it.

Henry on 25 Apr 2008 at 9:55 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 25 Apr 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 25 Apr 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 25 Apr 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 25 Apr 2008 at 8:36 pm

[...] http://www.leigeber.com/2008/04/custom-javascript-dialog-boxes/ Uncategorized 1 comment [...]

» JavaScript Dialog Boxes at adiso.net - Personal web site on 25 Apr 2008 at 11:14 pm

found your site on del.icio.us today and really liked it.. i bookmarked it and will be back to check it out some more later ..

Jerry Galino on 26 Apr 2008 at 3:05 am

[...] Custom JavaScript Dialog Boxes - A JavaScript library for creating modal dialogs with JavaScript. Personally I prefer to use FaceBox, a useful jQuery plugin, but this is a good standalone solution. [...]

BlogBuzz April 26, 2008 | Webmaster-Source on 26 Apr 2008 at 4:01 am

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

mark on 26 Apr 2008 at 10:27 am

[...] Web Development Blog » Custom JavaScript Dialog Boxes (tags: javascript dialog popup) [...]

links for 2008-04-26 « toonz on 26 Apr 2008 at 5:33 pm

[...] duyar

Anonymous on 27 Apr 2008 at 6:46 am

Fantastic! I really love it! Thank you very much!

Edwin on 27 Apr 2008 at 7:07 am

[...] (~4.5kb) JavaScript dialog box library. The script currently offers four dialog styles: alerts, warnings, prompts and success. The script [...]

Custom JavaScript Dialog Boxes on 27 Apr 2008 at 8:24 am

[...] Custom JavaScript Dialog Boxes Related Stuff60 More AJAX- and Javascript Solutions For Professional CodingdfFlexiGrid - Liquid Javascript Grid LayoutMac OS X-Style Dock Menu in Javascriptjavascript carouselsSwedish fika » Creating a fading headerGalleria - a Javascript Image GalleryHow to highlight search results with JavaScript | Eric Wendelin [...]

» Custom JavaScript Dialog Boxes Webcreatives on 27 Apr 2008 at 11:00 am

verry good.too good :),perfect.Thanks.

@hmed on 28 Apr 2008 at 8:38 am

hmmm

demo is looking really good? Im planning to have those my self

thanks for letting this know!

web application developers on 28 Apr 2008 at 12:07 pm

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

Rony on 28 Apr 2008 at 2:41 pm

[...] ) Custom JavaScript Dialog Boxes- A lightweight (~4.5kb) JavaScript dialog box library. The script currently offers four dialog [...]

Websites you shouldn’t have missed in April 2008 on 28 Apr 2008 at 6:06 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 28 Apr 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 28 Apr 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 29 Apr 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 29 Apr 2008 at 7:56 am

[...] Visita el artículo original de Michael Leigeber. [...]

Cuadros de alerta personalizados con JavaScript on 29 Apr 2008 at 10:28 am

[...] Lightbox ile özel diyalog kutuları oluşturmak. Bağlantı [...]

30 Nisan 2008 web’den seçme haberler » Tekil Yazı » Fatih Hayrioğlu'nun not defteri on 30 Apr 2008 at 1:13 am

Very very good work
From Italy, thank you.

bye

Emanuele on 30 Apr 2008 at 5:58 am

hello Michael,
thanks for the script. its very useful.

ilyas on 30 Apr 2008 at 8:40 pm

Beautiful dialogs, thanks a lot for share your work.

Greetings from México.

OddJoe on 01 May 2008 at 4:09 am

[...] Custom JavaScript Dialog Boxes A lightweight (~4.5kb) JavaScript dialog box library. The script currently offers four dialog styles: alerts, warnings, prompts and success. [...]

Discover The Best Of The Web In April 2008 - Opensource, Free and Useful Online Resources for Designers and Developers on 01 May 2008 at 4:38 am

[...] Custom JavaScript Dialog Boxes A lightweight (~4.5kb) JavaScript dialog box library. The script currently offers four dialog styles: alerts, warnings, prompts and success. [...]

Discover The Best Of The Web In April 2008 - A Great Place for News, Articles & Free Web Resources on 01 May 2008 at 10:46 am

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

jsguy on 03 May 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 03 May 2008 at 8:41 am

[...] Visita el artículo original de Michael Leigeber. [...]

Cuadros de alerta personalizados con JavaScript | Desen Web on 05 May 2008 at 3:09 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 08 May 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 09 May 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 09 May 2008 at 5:41 pm

[...] Custom JavaScript Dialog Boxes- Leigeber has put together a lightweight (~4.5kb) JavaScript dialog box library. The script [...]

Exceptional Ajax/javascript Techniques (Recently Created) on 12 May 2008 at 12:03 am

Trackback URI | Comments RSS

Custom JavaScript Dialog Boxes

57 Responses

Leave a Reply