JQuery modal dialog Boxes

Richard Wong 2 June, 2008

When we come to design modern web applications, modal dialog boxes are often required to quickly interact with users without reloading the whole page. So here are 3 JQuery based modal boxes for those of you who are using JQuery as the main Javascript Library.

1. Facebox

This is definitely simple to use, small in size and stylish in design.

2. SimpleModal

Another simple and small Modal Box.

3. ThickBox

Probably the more old school of three but ThickBox definitely does the job well. It has been around for quite sometime now and even the new WordPress Back-end uses it!

Comments so far

  1. bryan migliorisi June 4th, 2008 at 2:39 pm

    I love Facebox – for a major project I am working on, I used facebox and extended it quite a bit to support some even more advanced functions. Combine it with a faded out background, and its a killer modal box.

  2. Paul June 5th, 2008 at 10:06 am

    I used simple modal a fair bit.
    I also came across nyromodal which is great to use. loaded with features.
    http://nyromodal.nyrodev.com/

  3. Amd June 7th, 2008 at 5:35 pm

    I searched for \’Amd Custom Advertising Materials\’ at Google and found your post named \’nnial 2007 – salvatore iaconesi – del.icio.us poetry\’ in search results. Quite interesting to read.

  4. Jim Spence August 16th, 2008 at 12:17 am

    Friday In searching for sites related to AdSense but more specifically to %KEYWORD, I found your site which has great content.

  5. huhhhuhu December 1st, 2008 at 2:35 am

    sss

  6. dan December 29th, 2008 at 8:45 am

    facebox doesn’t work in safari (and safely assuming google chrome).

  7. Webagentur January 1st, 2009 at 7:39 pm

    Thank you … this tutorial has me very helped.

  8. asinox January 27th, 2009 at 3:51 pm

    @dan: Facebox work in all browser… im tested!

  9. Ives March 4th, 2009 at 5:50 am

    Funny you said that thickbox is old school.

  10. Aloy April 12th, 2009 at 7:02 pm

    I used thick box, is to just showing the HTML page as pop up window. anyone please tell me which model dialog box is the best one to create the form inside the model window.

  11. Heshan Peiris December 7th, 2009 at 3:09 am

    really useful. thanks for sharing. :)

  12. Thobib March 14th, 2010 at 2:00 pm

    i love jquery, This post adds a reference to me about jquery

  13. Save Pdf April 30th, 2010 at 10:18 pm

    thanx for information..

  14. Greg Harris May 22nd, 2010 at 6:43 am

    Awesome, blog post!!

  15. daenu June 23rd, 2010 at 7:43 pm

    I wasn’t happy with the ones mentioned, so I published my own on plugins.jquery.com, take a look here: http://plugins.jquery.com/project/micromodal

  16. test August 9th, 2011 at 7:30 am

    test

Post a comment

Trackbacks/Pingbacks

  1. Pingback from When the gas pedal becomes the brake pedal | Kaeli's Space
  2. Pingback from Bits And Pix » HTML: AJAX Modal Dialog Box
  3. Pingback from Utilizando o plugin SimpleModal Contact Form (SMCF) | Vinícius de Paula