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

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);
}

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

cu, w0lf.

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

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?

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.

[...] 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 [...]

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.

[...] 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. [...]

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!

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/

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

[...] 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. [...]

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

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

hmmm

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

thanks for letting this know!

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

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

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

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

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

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

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

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

[...] JavaScript Dialog Boxes / Javascript [...]

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

[...] Demo | Download | Documentation [...]

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?

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,

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

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.

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…

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

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.

Thanks a bunch.

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.

You saved my life!

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

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

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

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.

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

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.

thanks a lot
nice work

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!

[...] Custom JavaScript Dialog Boxes – “The script currently offers four dialog styles: alerts, warnings, prompts and success. [...]

[...] Custom JavaScript Dialog Boxes [...]

[...] Custom JavaScript Dialog Boxes – “The script currently offers four dialog styles: alerts, warnings, prompts and success. There [...]

Neat and nice modal.

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

Thanks.

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

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.

@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.

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

Regards,
Alejandro

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

[...] 官方网站：http://www.leigeber.com/2008/04/custom-javascript-dialog-boxes/ [...]

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

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

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

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

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>

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

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

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

Hi,
someone have and a example with confirms?

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

Thanx!

[...] Custom JavaScript Dialog Boxes. boyutu küçük (~4.5kb) basit script. sayesinde hata, uyarı, tehlike gibi durumlarda [...]

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.

[...] Custom JavaScript Dialog Boxes is a lightweight JavaScript dialog box library that offers four dialog styles: alerts, warnings, prompts and success. The “look and feel” can easily be changed through the CSS and additional styles can easily be added by adding 2 lines of CSS. It has an autohide feature which is used to fade out the dialog box after a specific number of seconds. Go to Project Page | Download | View Demo  The archive is made using WinZip 12.0. If you’re having problems unzipping it, consider using WinRar, WinAce or a similar software to extract the files from the archive. Be notified when we have new posts by subscribing to   BitRepository RSS Feed. [...]

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!)

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

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.

[...] Custom JavaScript Dialog BoxesA lightweight library (about 4.5 KB) for creating custom dialog boxes. Four boxes can be displayed: alerts, warnings, prompts, success. With a simple function, you can specify the title of the box, the content to be shown and how many seconds to show it for. [...]

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;

[...] Custom JavaScript Dialog Boxes A lightweight library (about 4.5 KB) for creating custom dialog boxes. Four boxes can be displayed: alerts, warnings, prompts, success. With a simple function, you can specify the title of the box, the content to be shown and how many seconds to show it for. [...]

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

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

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.

[...] Custom JavaScript Dialog BoxesA lightweight library (about 4.5 KB) for creating custom dialog boxes. Four boxes can be displayed: alerts, warnings, prompts, success. With a simple function, you can specify the title of the box, the content to be shown and how many seconds to show it for. [...]

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??

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

[...] Custom JavaScript Dialog Boxes 一个只有 4.5K 的轻量 JavaScript 库，可以创建用户定制对话框，可显示4种类型的消息框，alerts, warnings, prompts, success。可以设定消息框标题，内容，以及过多长时间显示。 [...]

Nice read and nice java.

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!

Great stuff!!!

Just one stupid question:

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

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

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

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?

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

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.