Custom JavaScript Dialog Boxes

• https://www.centerdynamics.com/ Chris Willis

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

• http://www.leigeber.com Michael

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

• EllisGL

  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.

• http://www.leigeber.com Michael

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

• Matt

  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?

• http://www.leigeber.com Michael

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

• numenzq

  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.

• http://www.leigeber.com Michael

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

• Pingback: java script diolog boxs tasarımları güzel :) - Volkan Şentürk

• http://www.channel-ai.com/blog/ eyn

  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.

• http://www.leigeber.com Michael

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

• Pingback: CSS-FAQ » Blog Archive » JavaScript dialog box library

• http://www.capalls.com Fred

  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!

• Juliano

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

• http://free-iphone-apple.blogspot.com mark

  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 Michael

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

• Pingback: » JavaScript Dialog Boxes at adiso.net - Personal web site

• Pingback: BlogBuzz April 26, 2008 | Webmaster-Source

• http://freebieinfo.blogspot.com/ mark

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

• Pingback: Custom JavaScript Dialog Boxes

• Pingback: » Custom JavaScript Dialog Boxes Webcreatives

• http://rony.creash.com.bd Rony

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

• Pingback: Websites you shouldn’t have missed in April 2008

• http://underdevelopment Paddy

  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

• http://www.leigeber.com Michael

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

• Gizmo

  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

• http://www.leigeber.com Michael

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

• Pingback: 30 Nisan 2008 web’den seçme haberler » Tekil Yazı » Fatih Hayrioğlu'nun not defteri

• http://doc82.ilbello.com Emanuele

  Very very good work
  From Italy, thank you.

  bye

• OddJoe

  Beautiful dialogs, thanks a lot for share your work.

  Greetings from México.

  J.

• Pingback: Discover The Best Of The Web In April 2008 - Opensource, Free and Useful Online Resources for Designers and Developers

• Pingback: Discover The Best Of The Web In April 2008 - A Great Place for News, Articles & Free Web Resources

• jsguy

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

• http://www.leigeber.com Michael

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

• Mark J. Zweidorff

  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

• http://underconstruction Paddy

  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

• http://www.leigeber.com Michael

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

• Pingback: Exceptional Ajax/javascript Techniques (Recently Created)

• Ty

  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.

• Pingback: Milestone 01 - 70+ High-End Components for Web Designers and Developers : DevKick Blog

• http://www.leigeber.com Michael

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

• Pingback: 30 recently created exceptional ajax javascript techniques

• Ty

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

• Pingback: {AJAX与Javascript}采长补短灵活应用 | 盒装大刀牌库存袈裟

• Cristiano

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

  Just a question: How can I modify window dimensions?

  Thanks

• http://underconstruction Paddy

  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?

• http://www.leigeber.com Michael

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

• http://www.doublec.biz Steve

  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,

• http://www.leigeber.com Michael

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

• Carla

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

• David

  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!

• http://www.leigeber.com Michael

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

• Joves

  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!

• http://www.stopdesign.cn sike

  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.

• Pingback: StarryNight » Blog Archive » 最新ajax特效30则

• http://- kvic

  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…

• http://www.leigeber.com Michael

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

• http://www.hotdealsnow.com warren

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

• http://sanait.com Mohd Shaik

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

  regards
  FEROZ

• http://www.brokerhub.net Saj

  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.

• Santiago Roque

  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!

• http://www.leigeber.com Michael

  @Santiago Roque – It should take any escaped HTML.

• http://www.leigeber.com Michael

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

• Manoj

  Excellent work ! Thank you !

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

• http://www.leigeber.com Michael

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

• http://intermodule.sourceforge.net/ Delan

  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

• http://www.leigeber.com Michael

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

• http://www.brokerhub.net Saj

  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?

• http://www.leigeber.com Michael

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

• http://n/a Alejandro Barrere

  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.

• AnonDeveloper

  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

• http://www.leigeber.com Michael

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

• http://N?A Alejandro Barrere

  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.

• http://www.leigeber.com Michael

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

• Jyothi

  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

• http://www.leigeber.com Michael

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

• J

  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

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

• Jyothi

  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

• http://n/a Alejandro Barrere

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

• http://n/a Alejandro Barrere

  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.

• kam

  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

  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

  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

• Help

  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.

• http://transisted.com/ Transitech

  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

• http://www.leigeber.com Michael

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

• http://www.djresource.eu Lead

  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!

• http://n./a pepe ortiz

  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.

• Pingback: 16+ Top JavaScript/Ajax Effects for Modern Web Design - aComment.net

• http://www.connorboyack.com Connor

  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.

• Pingback: Liens pour effets Javascripts Web 2.0 | Charlie Nguyen-Duc

• Pingback: Top JavaScript/Ajax Effects for Modern Web Design | Enetlive.net- Rich Internet Applications Blog

• http://www.bemsocial.org.br Eliel

  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.

• ken

  Neat and nice modal.

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

  Thanks.

• http://www.leigeber.com Michael

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

• http://lucidmonkey.com Christophe

  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

• Pingback: Ücretsiz Javascript Diyalog Kutuları

• http://software.bmlivestock.com/ CyberCowboy

  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.

• http://n/a Alejandro

  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.

• http://www.bigpromotions.net bigga

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

• http://www.bigpromotions.net bigga

  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.

• http://n/a Alejandro

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

  Regards,
  Alejandro

• Rubem Dickie

  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…

• http://n/a 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://software.bmlivestock.com/ CyberCowboy

  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.

• adamhut

  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?

• http://www.leigeber.com Michael

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

• Meroko

  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.

• http://fuedo.com Yordan Stoev

  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

• http://www.el33.es Omar

  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

• Diego Calazans

  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.

• s

  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

• http://fuedo.com Yordan Stoev

  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

• s

  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

• http://blog.jopicar.com jopicar

  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>

• Ajay

  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

• MuraDweb

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

• http://enikofactory.blogspot.com Niko

  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!

• Tarek

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

• http://link Renita

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

• http://www.pegateya.com galax

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

• http://fetishcode.wordpress.com fetishcode

  Hi,
  someone have and a example with confirms?

• Bharat

  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.

• Andrey

  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

• http://noneyet Mark

  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?

• Pingback: Ajax/javascript Techniques | Design it

• Pingback: ücretsiz javascript diyalog kutuları « zrmbilisim katkıları ile 2009 seo yarışması

• topmint

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

• http://singulartechnologysolutions.com Michael Condon

  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.

• Pingback: Stylish JavaScript Dialog (Alert, Confirm, Prompt) Boxes

• Dustin

  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!

• Dave

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

• Édouard Monet

  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,

• Shawn

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

• Pingback: 40 Useful JavaScript Libraries | Developer's Toolbox | Smashing Magazine

• Nick

  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.

• Pingback: 40 Useful JavaScript Libraries | Tech Underground

• Pingback: 40 Useful JavaScript Libraries | The Scripts Zone

• Pingback: Feed Reader (Beta) » 40 Useful JavaScript Libraries

• Vanco

  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;

• qiu

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

• Pingback: 40 Useful JavaScript Libraries « Hdeya team blog

• Yuva

  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

  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

• http://www.reduceridepreturi.ro Marton

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

• Bill

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

• http://Selectboxissue. Yuva

  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.

• http://Selectboxissue. Yuva

  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

• Pingback: 40 Useful JavaScript Libraries | veryweblog focus on the internet ,new media.

• Pingback: 40 Useful JavaScript Libraries - o2webdev

• Rene

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

• mimim

  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…

• Lego

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

• Pingback: 我想网 » Blog Archive » 40 个轻量级 JavaScript 库

• Pingback: 克兰印象 » 40个轻量级JavaScript 库（下）

• Pingback: 40 Useful JavaScript Libraries | Bookmarks

• Giampiero

  Hi. Thanks a lot for your project. It is very useful!
  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

  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!

• Gijs

  Great stuff!!!

  Just one stupid question:

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

• mike

  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

• http://canadaprogrammers.com matthew

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

• ofk

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

• Pingback: 40 个轻量级 JavaScript 库（下） - Jeff-Chen.Com

• Rob

  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?

• Pingback: 40个实用的轻量级JavaScript库[SM] | Beleben Design

• David Wu

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

• Pingback: » 【转载】40 个轻量级 JavaScript 库 （下）- WEB前端开发- 专注前端开发，关注用户体验

• Hector Zhang

  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.

• Spikyangel

  Great work man!. Thanx for the share.

• http://bengographics.com/blog/ bengo

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

• Pingback: Exceptional Ajax/javascript Techniques (Recently Created) | Webmaster Zone - Cyooh.com

• Jherssonny

  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
  }

• Pingback: CAIXA DE DIÁLOGO ELEGANTE EM JAVASCRIPT

• Pingback: 30个精挑细致的Ajax和Javascript 技巧 | 帕兰映像

• BoD

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

• Darren Line

  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?

• Steve

  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?

• skeef

  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

• Pingback: 40个轻量级JavaScript脚本库 | 帕兰映像

• Prasanth

  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.

• http://www.abantcamp.com engin

  very nice script.Thanks for sharing.

• Pingback: 40+轻量级JavaScript库 | Learning jQuery

• Leo

  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 ?

• Pingback: 40 个有用的JavaScript库 - Ajax Finder [Ajax探索者]

• Ryan

  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?

• Samiev Suhrob

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

• Marcela

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

• Dr. Trevor

  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!

• http://www.vuware.com Ratty

  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"

• http://www.vuware.com Ratty

  To Dr Trevor: The Update I posted fixes that issue

• http://www.vuware.com Ratty

  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.

• http://www.vuware.com Ratty

  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/

• http://www.vuware.com Ratty

  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/

• Carlos

  Hi,

  Very nice script.

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

• http://www.vuware.com Ratty

  ***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*/}

• http://www.vuware.com Ratty

  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/

• Stone

  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

  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?

• http://www.vuware.com Ratty

  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

• KK

  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.

• Jonatan

  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.

• http://www.vuware.com Ratty

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

• Pingback: Custom Javascript Dialog Boxes with 4 Styles « Jbloo

• Pingback: 16+ Top JavaScript/Ajax Effects for Modern Web Design | DevWebPro

• Madeline

  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.

• Pingback: 23个Javascript弹出特效 « 幻岛|领地

• Justin

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

• http://www.vuware.com Ratty

  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)

• http://www.vuware.com Ratty

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

• ismail

  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

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

• ismail

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

• ismailc

  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

• zwot

  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.

• http://www.vuware.com Ratty

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

• http://www.vuware.com Ratty

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

• ismailc

  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?

• http://www.vuware.com Ratty

  To Ismail:

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

• Geofrey

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

• James

  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&quot;,"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

• Teresa

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

• Pingback: Javascript diyalog kutusu kütüphanesi - Çağdaş Polat

• http://www.vuware.com Ratty

  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/

• http://www.sfdtorino.it jgurl

  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

• Pingback: Javascript diyalog kutusu kütüphanesi - - ekimdusu.net

• Pingback: Milestone 01 – 70+ High-End Components for Web Designers and Developers « DesignerLinks

• Pingback: 40个实用的轻量级JavaScript库 40 Useful JavaScript Libraries | Collection and sharing

• Pingback: 40 Useful JavaScript Libraries « 80端口的简单幸福生活

• Pingback: 40 个轻量级 JavaScript 库 （下） « i在云端

• Indra

  Very elegant and professinal dialogs. Amazing work !

• MeS

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

• Geofrey

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

• http://www.pimpmyforum.nl Dennis

  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

• Karun Singh

  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

• http://hogarcrecer.blogspot.com Hogar Crecer

  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!

• Michel Kogan

  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

  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>

• Pingback: Exceptional Ajax/javascript Techniques (Recently Created) | amitkosti.name

• Kye Etherton

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

• priya

  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

• Maik

  Thank you for that great solution. Looks pretty good!

• Mauricio Orozco

  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.

• Oscar

  Esta muy bueno esto!!
  no hay algún articulo pero en español

• Syam2006

  Is it possible to display text contents with font,dv,span etc with styles ..

  thanks
  syam

• DarkPhoenix

  I get an error on this line dialogmask.style.height = content.offsetHeight + 'px'. When run on IE8, it says "Object Required". Any ideas? Help is extremely appreciated.

• http://www.itsolusenz.com darwinjalen

  Great informative script , Thanks for sharing this script, I really update my programming knowledge.Thank you so much…..

• Jeffery Mak

  Great script! Great work! Thanks very Much

• Vingorius

  Tks very much for sharing this good script.

• lol

  Not so good

• ThEwHiStLeR

  Could you make this into a return confirm with a couple of buttons?

• ashish

  hey i'm trying to use this in my college project, and so far i haven't been able to use iti've placed the dialog folder in my root directory of projectand under the root are other folders in which my for different parts – header,content,footer.now in the content are located all the main files – search_handler.jsp signup.jsp,login.jsp,etcnow for trying out i did this in the script of my login.jsp page, in which i just basically check if the user has entered a username and password before just pressing enter.if any of them are empty, i previously showed an alert box, telling the user that they missed entering username or password or both as the case maybebut now using your stylish boxes i'm getting nothinghere's what i'm doing:<script src="/dialog/dialog_box.js"></script> <!– linking to your dialog box–><script>//the login validation function i use in my login form goes hereand here i just useshowDialog(….);</script>but the dailog doesn't appear. only the div error msg i put from my jsp comes, which is checked in the login.jsp's jsp part of the code

• Sxcdsc

  xcxcxc

• http://www.facebook.com/people/于水江/100001532835528 于水江

  thanks , very good script .

• Sli_p

  I am trying to use these functions but its not even showing the dialog on the browser

• Body

  i really liked this !! awesome it will helps alot

• John

  It looks really great!!!!

• Tashi Nero

  fitty mu kutty dy puttro wrong formula h

• http://www.ramzikomati.com Ramzi Komati

  One of the benefits of alert() and confirm() functions is that they stop the process of the script until the user response to that alert() or prompt() function…

  DoingSometing();
  alert(); // This will stop the process of the script until the user clicks OK.
  DoSomethingElse();

  How can we stop the process of the script using a custom made dialog box? Any ideas…

• Krunal Vaghela

  Thanks for the info's! Your article actually helped me.

  http://www.iweballey.com/

• Grabbs

  dont know what is wrong…. cannot have this to work proprely… i got a white screen when executing the function….

  why

• Grabbs

  dont know what is wrong…. cannot have this to work proprely… i got a white screen when executing the function….

  why

• Sssss

  http://www.mediafire.com/?u283th50w333w11

• Manthan

  Don't spam here

• Dimcho

  It would be nice to include not truncated icons. Awesome script and css

• http://www.handmaderetail.com/ Iulius_com

  Thanks for the source
  Will want to use this script (adapted) in my sites:http://www.handmaderetail.com/
  http://www.handmademegastore.com/
  http://www.handmadehyperstore.com/
  http://www.handmadehypermarket.com/

  Thanks

• WantToKnow

  not sure how you add the buttons to the prompt dialog? Could You Show the code or an example?

• filmtablette

  don't know if it's right or not, but it works for me

  in dialog_box.css find #dialog
  change the z-index to 10001

  in dialog_box.css find #dialog-mask
  change the z-index to 10000

  in dialog_box.js find dialog.style.opacity = .00;

  and set the opacity to 1.00

• Prabhakaran

  thank u so much ,it is excellently working…

• fjjess

  asdf asdfasdfd

• Santhosh047

  How to add Ok and Cancel in Confirm box

• cocomi

    One
  of the benefits of alert() and confirm() functions is that they stop
  the process of the script until the user response to that alert() or
  prompt() function…

  DoingSometing();alert(); // This will stop the process of the script until the user clicks OK.DoSomethingElse();

  How can we stop the process of the script using a custom made dialog box? Any ideas…

• Nguyenminhtanct99

  hic hic please help me. I can't use it if i have one folder. example: http://localhost:3000/webcore/register/register can't not show popup javascript on the screen 

Supported By