Facebook-Style Modal Box Using MooTools

Discussion

1. Rich

   Incredible. We need this in a jQuery version. Great work David.
2. Chris

   Great work! :-)
3. David Walsh

   @Rich: There’s one already: http://digg.com/d1Jurz

   My effect isn’t anywhere near as fancy, so I may try to do more with it in the future.
4. Rich

   @david thanks for the heads up. I use that jQuery one on certain projects, the biggest thing I ran into with the jQuery one (and not sure how yours would handle the same issue) was the pop up over a form in IE6. what a pain that was wow. yours seems much cleaner as well for some reason.
5. Red

   The demo isn’t modal, I can click a level behind it and get a response to those clicks…
6. george gurrola

   nice! very smooth transition
7. digital

   @Red true, it isn’t. But it’s not so hard to add Aaron’s modalizer to it actually. They both work fantastic.
8. David Walsh

   @Red: Thanks for pointing that out. In the future I’ll be making a much more fancy/controllable version of this. For now though, I just wanted to do a simple breakout of what Facebook has.
9. digital

   @David: So far, the fade in effect isn’t working for me in IE7/8 (Well, I’m on Windows 7 so I’m not sure if it actually doesn’t work or this is a IE8 beta flaw. Moreover, I’ve managed to modify your script to use classes instead of ID’s, this way I can add more than one modalized dialog in 1 page. Not sure if you’re interested in it.
10. Fabian

    I don’t like the used tables…
11. Adriaan

    @Red: Thanks for pointing that out. In the future I’ll be making a much more fancy/controllable version of this. For now though, I just wanted to do a simple breakout of what Facebook has.

    Can’t wait for the more fancy/controllable one, that will be awesome! Thanks!
12. David Walsh

    @digital: Thanks for using my Top-Of-Link code! :)
13. fugazi

    David, this tutorial is amazing!
    thanks a lot man!!
    go ahead! :)
14. Timothy

    Wow, slick! Looks great
15. digital

    @david: You’re quite welcome, I love it!
16. Elkalidi Abdelkader

    I love your scripts.
    a small shift on IE6 I suggest using getCoordinates(); for accuracy positioning.
17. Kromack

    Thank’s, another great job :)
18. roné/di/kristu

    I am kinda amazed by your programming skills and your enthusiasm. Rock on! :)
19. Ahmad Alfy

    omg

    all those css rules!!
20. Johnny Goodman

    Heylo. I’ve been using javascript two days now. So yes its very new to me but its exciting.

    I’ve got the facebook modal running and I’m trying to make a website that is pretty much a directory website for bands in my area.

    So on the main main I have a list of bands. If I want the modal to load with an individual message and picture for each band.. what do I do. Do I create multiple modals using different names? and If so, how would I do that?

    If not, what way do I go about doing this?

    I can edit the css and html but not sure really about javascript.

    Thanks. J.Goodman
21. David Walsh

    Awesome everyone! Found this great MooTools plugin:

    http://code.google.com/p/moofacebox/
22. TryLife

    Great work! :-)
23. willdebeest

    The effect is brilliant, but I am unable to get it to work in IE7. The modal still appears, but without the fade-in or fade-out. Any ideas?
24. sean sumido

    O my GOD!!!! this is what im looking for! I love it! Thanks for sharing!!!!
25. thedeejay

    Is it possible to have multiple-modals (four on one page)?
26. Ehsan

    Excellent David …

    Could you please put zip file also for easy use

    thanks
27. Ken

    Hi David,

    I want to use as automatic popup, how can i make it?

    Thanks.
28. Izzuddin Noor

    I manage to done this using jQuery Much more Simpler and basically you only need to change to content. everything are preset.

    but I think better let david host the files. If he ok with it. I kinda lazy to put it on share storage.

    David let me know by mail so i can pass you the jQuery files and test page as well.

    Example:
    http://img199.imageshack.us/img199/1020/fbexample.jpg
29. maraxus

    @digital
    Can you share the one using classes?
30. John

    Hi David

    Thanks for your great solutions.
    Do you have any ideas as to why there is a JS error in IE7?
    I thought it may be css but could not find this.
    Here is the error.
    ‘Oject does not support this object or property’.
    It happens only when you click the box.
    Anything you can offer me would be great, I sweating on this for work.

    Thanks

    John
31. shivs

    Is it possible to have multiple-modals (four on one page)?

    Did anyone figured this out yet ?
32. John Brunskill

    Hi Shivs and anyone who is interested.
    I needed the modal box to work with multiple containers so I hired a crack JS guy to rewrite David’s script with a loop and so classes could be added to the trigger and the modal boxes. It is a ripper.
    I will post sometime this month but if you need the script hit me up with an email from my site.

    If you want the David’s script not to throw an error in IE, take out the function that is written for the modal box to fade when you click outside of the box.
    I think it is lines 10-13. It will still work with this out.
    JB
33. AlanR

    If you use YUI! base.css with this dialog, it’ll break it a bit. Try disable base.css and see what happens ;)

    Great work David,
    A
34. mrogia

    cool. thanks!
35. robdeluxe

    Very nice.

    I want to use something like this on a small website that I am creating. The main page is going to show a number of thumbnails and when clicked I’d like a modal/lightbox to be shown with an image and other content populated from a database. I’d then like the user to be able to click next/back to navigate to the next image/content in the database. Is it possible to pass php variables using this modal method? Do you know of any others that would suit? I am very new to web dev so I hope it isn’t a stupid question!

    Cheers.
36. Daxon

    Any possibility to set more than one “id=”fb-trigger”? Maybe with “$each”?
37. Daxon

    I’m thinking of:

    $each($('fb-trigger').addEvent('click',function() {
        $('fb-modal').fade('in');
    }));
    

    But it don’t work…
38. Carl

    This is great,

    Does anyone know how to make the background i.e. the original webpage go darker so the focus is on the box, like what lightbox does.

    Thanks.
39. Bill

    I am interested in the same thing as Carl. I think another term for what we want is a “Modal” window.

    Thanks.
40. ILan

    how can i have multiple instances of this popup?

    Ilan
41. Jon Hancock

    Have you made any progress on making your modal facebook dialog packagable? I’m trying to follow your tutorial now and would appreciate knowing if you have anything more recent.

    thanks, Jon
42. Hery

    Finally I found the solution!.
    Thanks Davids for share.
43. Ramazan TAŞKIRAN

    Great work! Thank a lot.
44. David

    Great script, thanks as ever :)

    Any chance we’ll ever see a fix for the IE7 bug, whereby clicking on the body triggers a page error? Thanks again.
45. Tyler Hayes

    Does anyone know of a tutorial on how to make a Digg-style button, too? This would be similar to the TweetMeme button, in that it’s just a number (of how many Diggs or Retweets have been given) and the word “Digg” or “Retweet” below. Great tutorial David :)
46. Paulie

    If anyone is having issues with firefox creating a ripple effect on the left side of the screen when scrolling down:

    The cause is position:fixed; change to position: absolute;
47. joe

    hello cracks,
    i’am sure that somebody fixed the problems with IE7 (no fades, no outside click)
    can somebody post the solution here?
    thx in advance
48. joe

    Here is a working solution for the outside click:

    $(document.body).addEvent('click',function(e) {
    var x = $($pick(e.target,e.srcElement)), box = $('fb-modal');
    if(box.getStyle('opacity').toInt() == 1 && !x.getParent('.generic_dialog'))
      {
        box.fade('out');
      }
    });
    
49. blackdown

    Where is the html code ? XD
50. Tim

    Thx man! This has been a great help!
51. Amit Das

    How can I download full code?
52. jfawcett

    I created a pretty simple mootools class based off of this idea. I’m pretty new at writing mootools classes or javascript classes for that matter but it works pretty well. It supports multiple instances of the box and the ability to specify custom id, classes, and show/hide events.

    Demo: http://dl.dropbox.com/u/905197/FbModal/index.html

    Download: http://dl.dropbox.com/u/905197/FbModal.zip

    Usage:

       // A Simple instance
       var simpleModal = new FbModal();
       FbModal.setContent('Title Test', 'Test Summary', 'Test Body');
       FbModal.show();
    
       // A more more complex instance
       var myModal = new FbModal(
       {
             id: 'myModal',
             onShow: function()
             {
                this.container.setStyle('display', 'block').fade(1);
             },
             onHide: function()
             {
                (function()
                {
                   this.setStyle('display', 'none');
                }).delay(600, this.container.fade(0));
             }
       }).setContent('Title Test', 'Test Summary', 'Test Body').show();
    

    I hope this helps some people!

    -john
53. oeian

    @David Walsh: How to use in html
54. chris

    @David Walsh:
    my is Chris Valentine, From Accra Ghana and i am a web developer and a systems engineer for margins Group company basic in Ghana.
    Please i need your notion concerning the web application i want to develop for my company with PHP and MYSql as the database.
    we have their department which will be using this application and this departments consist of ID,Supply and pronto.
    in margins ID, we have management, front-desk person, Technical s, access control, productions, while in Supplies we have customer service person, accountant, management, and logistic.
    In pronto we have the cashier, production, sales.
    i need your concept on how to create all the departments, data-entering, login interface for each department and weekly reporting interface and what ever you feel should be included.
    please physical structure, logical structure and relationship.
    thank you very much i wait to hearing from you.
55. joe

    @jfawcett: I implemented the code you made!! Awesome! But how do I prevent it from opening on page load?

    On only pop when the link is clicked?

    Sorry for such a new b question.

    Thanks in advance.
56. jfawcett

    @joe: Hey, joe. I haven’t looked at this stuff in a while, so.. here it goes.

    From just looking at my source real quick, it looks like the reason its opening on page load is because on line 23, I’ve chained the function show to the setContent function which is actually chained to the modal class instantiation. And all of THAT is inside the function I have specified to run on domready.

    What to do: Just take out the call to the “show” function on line 23 from my example.
    Line 23 should look like this: }).setContent('Title Test', 'Test Summary', 'Test Body');

    hope this helps.
    -john
57. Joe

    @jfawcett: Works Perfect! You da man! Thanks so much.
58. javen

    @jfawcett: u’re the man!!
59. Jack

    Its dont working…Im trying to copy-paste inside code of demo-page – its dont working…