MOOdalBox - an HTML Lightbox

MOOdalBox: A modal box (inline popup), used to display remote content loaded using AJAX, web 2.0 style, written for the mootools framework.
It can be used to display some help document, an extra options page, a registration form, etc. It eliminates the need of classic popup windows, that may get blocked by popup blockers.
It's originally based on the excellent code behind Slimbox, so it inherits most of it's qualities / functionality. Compressed, it's only 4.2 Kb (about 25 Kb, including images, CSS and a light version of mootools 1.0).

NEW: discuss MOOdalBox on the forums. Get support from others using it.

Demo

Open a default moodalbox, a larger (700x500px) one and one with an error (points to an inexistent file).

Download

Version 1.2.1 is currently available for download. For other versions, check out the Google Code project for MOOdalBox where you'll find a repository of different versions.
Choose your download type below:
Compressed version and a trimmed down distro of mootools 1.0
Commented / editable code and a full mootools 1.0 distro
 

Requirements

MOOdalBox requires mootools 1.0 or newer. You can either use the one provided in the archive, or download your own customized version from the mootools download page. But beware, the mootools version included is stripped down to only include the modules that MOOdalBox needs:
  • Core: Moo, Utility
  • Native: Array, String, Function, Element, Event
  • Addons: Common, Dom
  • Window: Window.Base, Window.Size
  • Effects: Fx.Base, Fx.CSS, Fx.Style, Fx.Styles
  • Remote: XHR, Ajax

Setup

Copy all the files in the archive to your folder. MOOdalBox uses the following folder structure (if you need to change it, be sure to modify the paths in the CSS file as well):
|-css
|   moodalbox.css
|-img
|   closelabel.gif
|   loading.gif
|-js
|   mootools.js
|   moodalbox.js
Include moodalbox.js (and mootools.js as well, of course) and moodalbox.css in your page header: <script type="text/javascript" src="/js/mootools.js"></script> <script type="text/javascript" src="/js/moodalbox.js"></script> <link rel="stylesheet" href="/css/moodalbox.css" type="text/css" media="screen" /> Then simply add rel="moodalbox" to any of the links you want to open inside a MOOdalBox: <a href="some-page-to-load-inline.html" rel="moodalbox" title="Caption: a description of the page that's loading.">some page</a>.

Extra options

You will find some extra options in the JS file right at the beginning (constants - there's an explanation right next to each one). The title attribute of your links will be used as a caption. Some more options can be passed via the rel attribute of the link, such as width and height, for now (more will be available soon). For example, opening a 800x600px MOOdalBox is done this way: <a href="some-page.html" rel="moodalbox 800 600" title="Caption: a description of the page that's loading.">some page</a> If you would like to open a MOOdalBox using javascript, you may do it this way: MOOdalBox.open( // case matters
"http://www.example.com/", // the link URL
"Some kind of caption", // the caption (link's title) - can be blank
"500 400" // width and height of the box - can be left blank
);

Customization

Have a look at the CSS file, lots of stuff can be changed from there.
(!) When changing the "close" image, be careful to specify its dimensions in the CSS file as well.

Google Code project

I have set up a Google Code project for MOOdalBox, that you may use for posting any issues you may have with the script. This way, all issues are centralized in one place, for all to see and me to solve :)

Troubleshooting

  • check the include paths (for images also); modify to suit your own folder structure. I usually have a css, js and img folders whatever I do so this is built accordingly.
  • if your moodalbox is not centered (displayed at the top of the page) and the overlay is displayed as a narrow stripe only, it's because of your current doctype definition. You should use an XHTML doctype for MOOdalBox to work. See the W3Schools HTML doctype tag page. Also, please note that the DTD should be the absolute first line of your doc, or the browser won't interpret it and will go into quirks mode.

To do / Future versions

  • ability to load images (I'll leave that to the dedicated plugins that already exist, for modularity's sake)
  • set an optional timeout, so that if there's no response from the server, it displays another neat error message
  • callback function onClose of the moodalbox
  • a .config() method, that will allow changing options on the fly, without modifying the JS file
  • more stuff, based on your suggestions :)

Changelog

Version 1.2.1 (Feb/19/2006)
  • Corrected some bugs that somehow slipped into the 1.2 release.
Version 1.2 (Feb/09/2006)
  • Added error handling (it now diplays a neat error message inside the window, that you can dismiss by clicking anywhere
  • Rewrote some of the code to take advantage of newer mootools 1.0 features
  • Added a keylistener for CTRL + W, CTRL + X and ESC, to close the MOOdalBox
  • Some code optimizations
Version 1.1 (Jan/2007)
  • Completely removed the key listener, to make it usable with web forms.
  • Converted some of the functions to newer mootools 1.0 compatible code.
Version 1.0 (Dec/2006)
  • Initial release, code based on Christophe Beyls's Slimbox (http://www.digitalia.be/software/slimbox).
  • Removed some functionality, such as next / previous image, gallery functions, key listeners for some keys.

License:

MIT style, meaning you can do anything with the above code, but I won't be held responsible if it blows your microwave up.

The story:

I was faced with the request of implementing a modal box into one of my projects, and the client suggested ModalBox, but this one uses prototype and I had done everything else on the website using mootools and didn't want to load extra JS's just for that. So I searched for a mootools version (just like I used Slimbox instead of LightBox V2), but couldn't find one. So I made my own, based on the excellent code of Slimbox.

Article Info

This article was read 126491 times.

All scripts on this site are free. However, if you feel you want to contribute, use the button below.

COMMENTS (126 comments)

hi wld like the uncompressed version of the script to work on, is it poss to make it available? cos the one linked above is compressed version and makes it q hard to work with (when i’d like to mod some stuff). thanks somuch.

1 nah / February 15th, 2007, 04:13 / #

Hi,
I love your script.
I use the v1 and now i’m trying to install the v1.2.
But this version doens’t work. I use all files of the zip file but…
A really simple demo page will be great for a lot of users.
Thanks for your work and this script.

2 Phil / February 16th, 2007, 12:12 / #

A lot of helpful information the resource has found on your site, thank very good! I wish you a site even better, thank!

3 Richard / February 18th, 2007, 10:54 / #

I updated the page, included a demo, added both versions (compressed / uncompressed).

Sorry for the trouble, the website is still a work in progress.

4 Răzvan Brateş / February 19th, 2007, 03:00 / #

FYI: Your dates are wrong above. Cheers.

5 Ben / February 23rd, 2007, 20:56 / #

Hi

Nice work with the script, but I have one question:

How would I open MOOdalBox using javascript?

Thanks

6 Daniel Hastings / February 24th, 2007, 04:31 / #

hi;
where is the place to ask questions about this component? i am having trouble with evaluating the response and it’s javascript code/
thanks

7 guy / February 26th, 2007, 10:08 / #

How can i get htis working with IE7? All i get is the image or html in a small white container but no overlay…. can you help?

8 ross / February 26th, 2007, 23:07 / #

Daniel Hastings, I updated this page to include the code to open a MOOdalBox using JavaScript. Check out the “Extra Options” section.

Guy, this is that place :)
Ask a more specific question and I’ll do my best to answer it in a timely fashion.

Ross, MOOdalBox was tested on MSIE 7 as well and performed just fine. Re-test your CSS (I suggest using FireBug) and see if there are any conflicting rules.
If you still can’t get it working, drop me a line with some sample code or prefferably a link to a test page and I’ll have a look at what’s wrong.

9 Răzvan Brateş / February 27th, 2007, 06:07 / #

HiYo r4zv4n, ^^;; I´m using your script for a time now, but never had my thankful expressed oO;;So… thank you! Mainly for the uncompressed version which makes possible incredible integration with my legacy apps

10 Fabio Zendhi Nagao / February 27th, 2007, 06:23 / #

i’m using it and i like it a lot \(^o^)/
i use ver 1.0 and just updated to ver 1.2.1. and it works without changing any css. cos i modify the previous css alot.

just a little help here, i cant make the modal window to have fixed position in i.e.
and that’s is my only problem using the Moodalbox
i change the css to have fixed position but it only work in firefox.

i hope in next release …..

thanks alot.

11 Dying Angel / February 28th, 2007, 08:15 / #

[…] Ventana de ayuda:http://www.e-magine.ro/web-dev-and-design/36/moodalbox/ […]

12 Blog de programación » Archivo del weblog » Ejemplos de uso de AJAX / March 1st, 2007, 09:10 / #

Great script; definately the slickest of the bunch.

Question; how does MOOdalBox handle flash content? I’ve succesfully embedded a Quicktime film, but Flash Video seems to fail.
Any ideas?

13 mquick / March 1st, 2007, 10:34 / #

Hi;
i use moodalbox to load an external html page which contains javascript file refferences.
moodal box will only open that page correctly if:
1. I set the ‘_EVAL_SCRIPTS’ property to true (makes sense)
2. I include the javascript files in the calling page, not the page i want to load (does not make sense)
am i doing something wrong here?

also, what is the ‘_EVAL_RESPONSE’ property for? i thought that for my use case i ought to change it to true but then there is an error.

i can provide a link if needed.
thanks.

14 guy / March 4th, 2007, 10:56 / #

Moodalbox looks like just what I need. Great script!

I’m trying to use it to show Flash content but I’m having no luck. Looking through the code there seems to be nothing actively modifying object/embeds from the centre panel and like another commenter I’ve loaded Quicktime without any problems.

Is this a specific problem with how Flash loads using AJAX or something?

15 Jake / March 7th, 2007, 13:35 / #

On Close, it would be nice to call another javascript function… so if an update can be made to a div on parent page or anything else that is needed after a moodal window is closed. Greybox has this option.
Will look at code to see about adding another parameter for this.

16 michael / March 7th, 2007, 22:36 / #

[…] MOODal Box by Răzvan Brateş Remote content , web 2.0 style. During my experimentation, i cannot use flash based […]

17 » Blog Archive » Lightboxes / March 8th, 2007, 12:27 / #

Dying Angel, IE doesn’t support the position: fixed CSS property, it must be emulated using JavaScript.

mquick and Jake, I haven’t tested loading Flash based content, but my guess is that since you’re loading HTML only, tha call isn’t made to the server to load the actual Flash content.

Guy, it seems that evalScripts and evalResponse are still a bit buggy in mootools 1.0, but they work fine in the current dev builds. I’ll have to investigate further, I included these options as stated in the mootools doc pages (have a look at the “Remote” section of the docs for explanations on this), but never actually used them.

Michael, that’s a good idea, will roll it into the next major release (check my *new* “to do” list ;)).

I’m currently migrating to another computer, and I hope I’ll get some time this weekend to release another version with all the corrections / additions required. Thank you all for your interest, and for bearing with my frequent absences from this project - I have very little free time on my hands lately :(.

18 Răzvan Brateş / March 9th, 2007, 11:31 / #

I was wondering how I would go about closing the MoodalBox using JavaScript? this.close() didn’t seem to do it.

19 Frankie / March 11th, 2007 (5 weeks ago), 03:29 / #

Nevermind,
MOOdalBox.close(); did it!

20 Frankie / March 11th, 2007 (5 weeks ago), 03:37 / #

Hi there! I was wondering if someone could help me out - I am trying to use Modalbox/Moodalbox to handle a search form, but I can’t seem to get it working since I call the Modalbox function when the user clicks on a “submit” button, and not a link <a href rel=”nofollow”>. So, I switched to Moodalbox hoping that adding the “rel = “moodalbox” would do the trick, but to my dismay, I discovered that I can’t create a “flow” of moodalboxed pages like modalbox can (ie. a wizard, consisting of a few steps). My requirements are as follows:

1. Page 1 loads in moodalbox, with 3 fields (read-only). The user clicks the “update” button next to a field.

2. Page 2 loads in moodalbox. This page is a “search” for field values (in my case, restaurant names). The user enters the search term in the search field (”q”, the query), and hits the “submit” button.

3. Page 3 displays the search results (it’s actually the same .php file as Page 2, except since “q” was set, the search if statement ran and it echoes the search results. The user clicks on the “Add this Restaurant!” button next to the search result.

4. Page 1 loads with the new replaced value for the field.

5. The user hits an “UPDATE” button on the Page 1, and the Moodalbox page disapears.

Sorry if this was confusing…any input will be GREATLY appreciated since I have literally spent hours toying around but to no avail. Thank you very much!

21 Andrew Lie / March 13th, 2007 (4 weeks ago), 07:15 / #

Well, Andrew, you’re in luck :)

Just this night I released the 1.3 BETA 2 version of MOOdalBox, that can now handle wizards.

It’s the post currently right under this comment box, or the first one listed in the “related posts” section. Maybe I should make it more obvious :P

Be aware, however, that this is a work in progress, not a stable release.

22 Răzvan Brateş / March 13th, 2007 (4 weeks ago), 09:17 / #

Awesome! I’ll be sure to check it out and give you some feedback! Do you know if I will be able to handle a “submit” form? I had the problem of only being able to apply the modalbox/moodalbox to link “a href” elements. Thanks very much!

23 Andrew Lie / March 14th, 2007 (4 weeks ago), 00:12 / #

Yes, Andrew, you will be able to submit a form (it overrides the onsubmit event of the form itself) and have results open inside a MOOdalBox (e.g. for a newsletter registration, etc.) and even have forms inside the MOOdalBox that submit to it (could be used for a multiple step register, some configuration, a setting wizard, etc.).

24 Răzvan Brateş / March 14th, 2007 (4 weeks ago), 07:20 / #

[…] un effet de fondu ne fonctionne actuellement sous Konqueror, que cela soit Lightbox v2, Slimbox, Moodalbox, etc […]

25 Boris Popoff | gueschla.com » Blog Archive » Smoothbox, Thickbox pour Mootools / March 17th, 2007 (4 weeks ago), 23:31 / #

I’ve some problem with you’re script.. i tryed also the newst versione ( the beta version ) but there’s no change.

This is the test: www.stermi.net/work/moo2/index.php

This is the test with MOOdalBox 1.3: www.stermi.net/work/moo2/index2.php

26 StErMi / March 19th, 2007 (4 weeks ago), 20:06 / #

Is it possible to put moodalbox over the top of some flash content? I’ve tried is using various combinations of flash objects, with varying degrees of success.

Does anyone have an example page where the moodalbox sits on top of the flash without the flash fighting to stay on top?

27 Gareth Williams / March 21st, 2007 (3 weeks ago), 11:07 / #

[…] Smoothbox viene a ser una adaptación del ya conocido Thickbox a la plataforma mootools (en lugar de jQuery). Si buscamos algo más sencillo, sólo para imágenes, tenemos el Lightbox de Phatfusion. Si lo queremos solo para cargar HTML, mejor utilizamos MOOdalBox. […]

28 RUDEWORKS » Archivo » Alimenta tu mootools / March 21st, 2007 (3 weeks ago), 16:50 / #

I have a problem with MoodalBox. Flash content keeps appearing on top of the moodalbox in FF (IE 6 hides the movie well). Is there any fix for this?

29 Claudio / March 21st, 2007 (3 weeks ago), 18:11 / #

fyi, this bug (http://forum.mootools.net/topic.php?id=1738) affects this script for SSL implementations. would be great to see a fix in the next release.

30 Anthony / March 21st, 2007 (3 weeks ago), 21:24 / #

Hi i have modified moodalbox to make it able to open pages from external sites too (in iframes), but i have got a small error:
in ie 6 transparent png-s with dx-filter hack are not transparent in moodalbox (check http://w3logic.hu/design2/ click on hosting and on the link “részletek…”)
tha strange thing is that it works with greybox (check http://w3logic.hu/design/) do anybody have any idea how to solve this?

thanks in advance.

ps.: excuse me my bad english ;)

31 Mate / March 24th, 2007 (3 weeks ago), 01:35 / #

Superb piece of scripting. Just superb considering the file size…thanks. Just one question. I am getting a problem with the Moodalbox Scroll bar. It keeps slipping in IE7 when I drag it up or down with the mouse. No such problem with FF. Am displaying a plain vanilla HTML page. Is there a workaround for this anybody knows of? I definitely hope it isn’t an IE problem with no workaround. Do let me know.

32 Rahul / March 29th, 2007 (2 weeks ago), 17:28 / #

I have a question regarding Urchin/Google Analytics;

According to the help section on Google Analytics, the urchin-code is able to track AJAX calls like thus:

http_request.onreadystatechange = sendAlert;
http_request.open(’GET’, url, true);
http_request.send(null);

}

function sendAlert() {

if (http_request.readyState == 4) {
if (http_request.status == 200) {
alert(http_request.responseText);
urchinTracker(”/pagefilename1″ );
} else {
alert(’Error.’);

See more at:
http://www.google.com/support/analytics/bin/answer.py?answer=33985&topic=7292

I’ve had a casual look-through at the moodal-code, but I’m not confident enough to modify.
Do you have any idea as to where I should place the Google code?
Thank you!

33 mquick / April 2nd, 2007 (2 weeks ago), 08:46 / #

Hi,

I’ve tried to embed a vmw-video to the box and it works, but I get I flashing white bar across the video about 322×27 pixels in Firefox, not in IE6/IE7. What’s up with that?

In IE6/IE7 the video doesn’t quit when I press ‘close’, but in FF it does…

Please help me,

Raffe

34 Raffe Bergwall / April 4th, 2007 (6 days ago), 19:44 / #

Hey, great script, I just have a question with v1.2

I have a piece of js that removes a bunch of links, then adds a bunch back in with an atribute of rel=moodalbox.

I thought if I did
MOOdalBox.init.bind(MOOdalBox)
at the end of the function, all the new links would also bring up a moodalbox, but this doesn’t seem to be the case.

Any suggestions?

Thanks and keep up the good work

35 tan / April 11th, 2007, 23:26 / #

I figured it, it should be
MOOdalBox.init(); rather than MOOdalBox.init.bind(MOOdalBox);

36 tan / April 11th, 2007, 23:49 / #

Great Work!! But, when I’m trying to link a video from another site (we get feeds from that site and we have to display videos from that site), this is not working. For example try linking this : http://www.realestateshows.com/show.php?mls=basic&id=92497
the moodalbox is not working. Is there a glitch that can help? Or moodalbox is not intended for showing content from another domain??

Thanks in advance for all your help.

37 SREE / April 12th, 2007, 22:38 / #

Well I am not sure if anyone has checked subModal by subImage http://www.subimage.com/dhtml/subModal/
but that one has better functionality than MOOdalBox. For example, I need to be able to freely show the modal Dialog for any event of my choice like the onclick of a normal input button (not necessarily a submit button) or any other event like the onclick of an image. A simple call to a function like shoPopWin will do the trick. Also subModal has support for callback functions and there is a way to make it support return values.
I know that this is work in progress but I think such features are very essential for anyone using this widget for anything related to form based applications. The thing that got me to try to use and extend your widget is the fact that it is based on MOOTools. I like MOOTools and the OO approach to javascript. Thanks…

38 Infinite_Recursion / April 13th, 2007, 17:50 / #

On my site simple, static, html page seems to be escaping from moodalbox: there is loading graphic, and instead of resizing the white div - it disappears, and i’ve got my page jus as i’d click normal link - it’s strange.
Have you gat any idea what’s happening?

39 Jarek / April 18th, 2007, 00:03 / #

in addition to #38:
when I try to call the same document, but on the same server as moodalbox is set on (at first it was a remote page) - everything’s ok.
Is it possible that it’s all because of the server?
calling any remote server makes the called page escape - can it be fixed??

40 Jarek / April 18th, 2007, 00:09 / #

why doesn’t moodalBox work with out running on a server? as a test I save this page from firefox to my desktop and it fails all so?
- thoughts

41 limeyd / April 21st, 2007, 18:21 / #

Hi there, I’m not sure if you’re monitoring your google code project - I placed on a issue on there a while ago to do with flash content being ‘above’ the overlay and moodalbox content, which a couple of people have also mentioned in the comments. Do you have any advice? Thanks, Ben :)

42 ben / April 23rd, 2007, 13:36 / #

This question has been asked sevaral times. But since there is no adequate answer i’ll ask it one more time.
How to eval the script in the ajax response?
I tried to set the params in the moodalbox.js (the uncompressed version) and it worked. But i don’t think this is a solution( messing with the core code of the plugin). There should be an option to execute moodal with evalScript set to true. So once again.. is there such an option? thanks

43 purepear / April 24th, 2007, 15:02 / #

Hi there, I had tried the example on this page. Well it’s works fine on FF, but not on IE6. The box was shown up and loading something but then only few second it’s jump to target url. I mean here about element seems doesn’t work properly yet even I added onclick=”return false;”. But if I create a Javascript function to open a MOOdalBox is works.

I guess a bug there. Thanks and sorry if repeated,

44 Firman / April 25th, 2007, 18:17 / #

Razvan,
Just wanted to let you know that your script works in the Epiphany web browser as well. Way to go :)
Tim

45 Tim Novinger / April 28th, 2007, 16:41 / #

I am trying to use the script to popup a web page that describes a list entry in more detail. However when i size the window to just fit the content it crashes Safari. It appears to work in all other browsers.

If I make the content larger or smaller it works fine.

Has anyone else seen this?

46 Scott Andrew / April 30th, 2007, 20:11 / #

what is so fucking difficult to provide a WORKING demo as a download. since when has it become the new black to only offer the dependent files but NOT the sample XHTML with the correct markup to make this work???

thanks a bunch.

47 seriously / May 2nd, 2007, 23:10 / #

Thank you for the fantastic script:) I was in the same boat, using slimbox with Mootools and wanted modal popups. You saved me the stress of figuring it out, and you’ve done a fantastic job!

48 Brady J. Frey / May 3rd, 2007, 18:58 / #

Any idea of how to move the flash file into the background would be appreciated. Ironically the flash file disappears on explorer but goes to the front on FireFox.

49 Walter Ness / May 3rd, 2007, 20:42 / #

“what is so fucking difficult to provide a WORKING demo as a download. since when has it become the new black to only offer the dependent files but NOT the sample XHTML with the correct markup to make this work???

thanks a bunch.”

Ouch, what a nice way to say thank you for someone who spent a considerable amount of time making a free piece of software for us to use on websites. Next time read the directions or download the full script - very few of us need a demo if you read the directions fully.

I’d also suggest if you’re going to be an ass, atleast have a pair on you and post up who you really are. An anonymous dick post won’t get noticed too much.

50 Brady J. Frey / May 7th, 2007, 18:54 / #

“OOPS”

Am I the only one who gets this with every single link I try to make? Using the 121full, 121 compressed AND saved-from-browser version, every window that opens says “Oops.. there was a problem with your request.”

The page I link to DOES indeed exist.

>

51 xd00d / May 11th, 2007, 18:26 / #

WOW! I’m really stupid. Sorry, I guess I forgot that Ajax pages won’t run on my local machine. :|

52 xd00d / May 11th, 2007, 18:41 / #

To get flash to load within the moodalbox i had to iframe the page i wanted to call and then call that.. and it worked fine..

perhaps i missed something otherwise.. not sure.

53 Brendon Gearin / May 14th, 2007, 10:12 / #

[…] Smoothbox viene a ser una adaptación del ya conocido Thickbox a la plataforma mootools (en lugar de jQuery). Si buscamos algo más sencillo, sólo para imágenes, tenemos el Lightbox de Phatfusion. Si lo queremos solo para cargar HTML, mejor utilizamos MOOdalBox. […]

54 Alimenta tu mootools « / May 17th, 2007, 01:12 / #

[Try #2 without brackets]

Solution for displaying over flash:

1. (IE solution) Add the following parameter element within your object tag hosting the flash file:
param name=’wmode’ value=’transparent’

2. (FireFox solution) Make sure your embed tag specifies the wmode attribute as follows:
embed wmode=’transparent’ …

Hope this saves someone the 1-2 hours it took me to find this [credit due to folks in the FusionCharts forum].

Matt

55 Matt Robinson / May 20th, 2007, 00:32 / #

Your moodalbox is really wonderful!!!
I have only one question: is it possible change container opening effect with another? for example with this http://www.kreatura.hu/pyro/clearbox/ ?
I have to modify only css or also js (this second case would be too complicated for me perhaps)?

Thanks for all (and sorry for my bad english)!!!

56 Kagliostro / May 31st, 2007, 19:07 / #

the links on the pages brought up in the moodalbox
keep the browser url in fron of my links. example say i’m calling moodalbox on www.jghinternet.co.za, and in the moodalbox there is a link to www.google.co.za, when the link is clicked, the url in the browser is www.jghinternet.co.zawww.google.co.za

any idea how to sort this out?
Thanks
ps - awesome script

57 Shem / June 6th, 2007, 17:39 / #

Can moodalbox be used on the same page as slimbox? i’m trying but slimbox just opens the image on a new page, while moodalbox works fine.

Shem

58 Shem / June 7th, 2007, 10:20 / #

@ SHEM

yes you can run both on the same page, I’ve done this on my portfolio site. look through the source if you have any questions. your problem is most likely something very simple that you’ve overlooked. also, make sure you have all of the necessary packages in your mootools build.

59 Tim Novinger / June 9th, 2007, 17:39 / #

Is it not possible to link the moodal window directly to an image? I get the raw jpeg data returned rather than an actual image displayed. Is this typical (have I missed something) or is it a bug?

60 Mike / June 13th, 2007, 22:38 / #

Is moodalbox compatible with mootools 1.1 ? I seem to have problems.

61 Vincent / June 14th, 2007, 10:32 / #

^^ nevermind! I *did* miss something, and that’s to use Slimbox for images rather than moodalbox. I’m sure I’ll have a need for moodalbox’s ajax nature some day so I’m keeping you in mind! Cheers! :)

62 Mike / June 14th, 2007, 16:58 / #

How can I pass string with a form action post between the various windows?

63 sciarp / June 16th, 2007, 13:50 / #

Hello,
why in the playground is it only possible to get the moodalbox just once. After close of the box a second start by clicking on any link is not possible.
(tested with IE6 and Firefox 1.5

64 Alfons / June 17th, 2007, 17:21 / #

I’m having the same scrollbar issues in IE 7 that MATE mentioned. This is also an issue on the demos used on this site.

65 Cory Duncan / June 21st, 2007, 23:43 / #

First let me say thank you for your wonderful code, it works great; however, I’m running into some problems in trying to use it in conjunction with a remote form on the same page. Depending on where I put the include statement for moodalbox and prototype (in which order) only one of the moodalbox and the remote form works - the other just opens in a new window. Help?

Thanks.

66 Zef / June 23rd, 2007, 03:37 / #

It’s actually whether or not I include mootools that seems to be interfering with calls to ajax.

67 Zef / June 23rd, 2007, 04:36 / #

Hi,

Thanks for a great script!

I’m using 1.2.1 and tried to call a php script like so:

some page.

But the script did not appear..

Has anyone encountered this? your help is much appreciated!

Cheers,

Vincent

68 Vincent / June 25th, 2007, 12:03 / #

Sorry please scratch my earlier post..

I was trying to call a php script from within moodalbox, response was empty,

Has anyone encountered this? your help is much appreciated!

Cheers,

Vincent

69 Vincent / June 25th, 2007, 12:07 / #

[…] That’s all for now.  Next Time:  MOOdalbox. […]

70 the source of get() » Blog Archive » Fun with DHTML … err, "AJAX?": Part 1, mootools / June 26th, 2007, 04:48 / #

How can I open a google page with moodalbox?

71 sciarp / June 26th, 2007, 17:52 / #

To get Flash objects to hide in Firefox, do the following:

You need the full version of MOOdalBox, not the compressed version (if anyone knows how to compress it, then that would be good)

Replace lines 125, 126 and 127 with the following:

var elements = $A(document.getElementsByTagName(’object’));
elements.extend(document.getElementsByTagName(window.ie ? ’select’ : ‘embed’));
elements.each(function(el){
if (open) el.lbBackupStyle = el.style.visibility;
el.style.visibility = open ? ‘hidden’ : el.lbBackupStyle;
});

Taken straight from slimbox.

72 Simon Maddox / June 27th, 2007, 16:52 / #

I have a checkbox that when clicked, it opens a moodalbox with a login form. The user can then login . The moodalbox will stay open if they click login and have bad credentials. Once they login with correct credentials, how can I close the moodalbox and finish the checkbox click event?

73 Jason / July 3rd, 2007, 05:42 / #

whoo, this is very nice.

however…the script fails when i use SWFObject (better flash embed script) anywhere on the page..
swfobject works, its moodal box that fails when both scripts are in the page.

74 scope / July 6th, 2007, 00:13 / #

I can’t seem to get this to work with release 1.11 of mootools either.

75 Frankie / July 8th, 2007, 23:04 / #

I was able to get v1.2.1 working with MOOtools 1.11 by changing the last line in the moodalbox script from
window.addEvent(’domready’, function(){MOOdalBox.init.bind(MOOdalBox)});

to:

Window.onDomReady(MOOdalBox.init.bind(MOOdalBox));

The window.addEvent works great if you’re using the SVN nightly builds of MOOtools.

76 Frankie / July 9th, 2007, 15:46 / #

experienced same trouble as in Post 61 and 64 (mootools 1.11 and mb 121 in use) can’t open the box more than one time. Has someone an idea?
anyway the script is great, thanx a lot for sharing.

77 nos / July 9th, 2007, 19:45 / #

How to close the MooDalBox from my own content page? I have a different layout and need the close button in the content-area, in stead of the original place…
How to?

78 richard korebrits / July 11th, 2007, 17:52 / #

Nevermind;

parent.MOOdalBox.close()

79 richard korebrits / July 11th, 2007, 17:55 / #

[…] MOOdalBox – an HTML Lightbox — e-magine [archives] (tags: javascript mootools lightbox modalbox ajax web2.0) […]

80 links for 2007-07-13 | Patrick Kempf / July 13th, 2007, 02:31 / #

Awesome that you can use the ‘rel’ tag, as well as a javascript call to activate.
I have a page that once a link is clicked, the response is ajax-generated, and in that ajax-generated section, I want to have links that open in a moodal box. The rel attribute does not work when the html is ajax-generated (aka element.innerHTML) you’ll need to use an onclick event with
**
MOOdalBox.open(
“http://www.example.com/”,
“Some kind of caption”,
“500 400″
);”
**

81 Eric / July 16th, 2007, 17:54 / #

[…] Mootools-Moo.fx, Prototype-Scriptaculous, jQuery e derivati: Smoothbox, Thickbox, Modalbox, MOOdalbox, Slimbox e chi più ne ha più ne metta.. L’ultima scoperta è stato un template per joomla […]

82 diploD » Blog Archive » Il flah a volte stupisce.. come javascript! / July 18th, 2007, 17:14 / #

I have downloaded and used every lightbox variation on the web, and I am most satisfied with yours. My only complaint is that it doesn’t support images.

Most of the lightboxes that support images fail validation, and the one that doesn’t; slimbox (…which is a great script) doesn’t play well with other scripts and doesn’t support html files.

Again thanks for the great work! Make sure to let me know if and when you decide to add image support!

83 Patty / July 20th, 2007, 11:43 / #

I am using this for an internal project. However I do have a problem with IE7. The box appears but not the black background (only a small appx 10px xparent black box at the top thats all) anybody got a fix for that ? Btw im loading moodal on a element.

84 nicknails / July 23rd, 2007, 20:23 / #

A very very awesome ‘mootool’!

Here is my problem; Using 1.2.1, i cannot seem to get this to work to ajax retrive; a mootool .php script. –its a contact form.
Seems the .php realitive links to the mootool.js + send.php and CSS arent kept realivive to the ‘viewing page’ in MoodalBox.

I’ve been trying to work this out, but to no avail.

I’ve tried 1.3rc4 but I get a ‘infinetly expanding’ horizontal nav bar on IE7. This didnt seem revelant to my issue though..

Anyone, any ideas?

I think a moodalbox serving a contact form would be very swarve indeed! Anyone else done this?

Thanks!
- Brody

85 Brody Mulry / July 25th, 2007, 06:43 / #

Hi There!

First of all GREAT JOB!! In my search to all different modal boxes this fittes my needs the most and also very light weight!

Do still have a tiny issue. It would be very nice and clean to include javascript files in the document reqeusted by the ajax call. Would there perhaps be more information available on this issue?

Many Thanks!

86 Martin / July 31st, 2007, 13:24 / #

Hello -

I’m experiencing Moodalbox -starting- to load (dimming the screen), but then it aborts and opens the content in a plain white window.

Seen here: http://ticketsonrails.com/shows

Any thoughts?

87 Chris Coyier / July 31st, 2007, 22:59 / #

I really appreciate your work. Can i get a feedback on how to integrate this with a database? so that i can save whatever I type..i guess in your toolbox, The javascript being used has used some static text that gets displayed even after a refresh

88 Asmita / August 8th, 2007, 07:05 / #

love the srcipt. 2 questions
is there a way to show a specific div within the page not different page load?

does it work with mootools 1.1 ?

89 benn / August 8th, 2007, 20:32 / #

Why no single image support? I would love to use your wonderful script to hangle all my modal box needs but alas - no image support. I don’t see the point of using two different scripts to do the same basic thing… Please reconsider adding this functionality to your script. Sometimes the lesser of the two evils is evolution ->

90 DMT / August 15th, 2007, 01:16 / #

Hi
is there a way of having two moodal boxes up at the same time?

thanks in advance

91 Duncan / August 20th, 2007, 01:20 / #

[…] verin Cool web2 stuffs to download Download edilebilir Kuul web 2.0 arşivi Ajax triple dropdown MOOdalBox: A modal box (inline popup) Yani Popup ama… aslında değil. Fisheye Menu O da ne yoksa bu site MacOs tan mı […]

92 599+ Ajax Uygulaması | Milyonsite | / August 21st, 2007, 23:47 / #

[…] MOOdalBox - an HTML Lightbox — e-magine [archives] (tags: mootools javascript modal lightbox) […]

93 links for 2007-08-23 | giancarlo.dimassa.net / August 23rd, 2007, 02:57 / #

[…] I found a few great contenders but I settled on the very excellent Lightbox 2 by Lokesh Dhakar, as it did exactly what I needed, looked good and used prototype and script.aculo.us. If I wanted overlays in general for other interactions or content, I would have gone with one of the scripts previously mentioned, or the very cool ModalBox, and if I was using the Mootools JavaScript framework (which would have been ideal, I really like Mootools) I would have used MOOdalBox. […]

94 A JavaScript overlay image gallery at gradient dropshadow curve / August 27th, 2007, 21:59 / #

Hi, thanks for the code. It works fine, but if the user tries to print the moodalbox page, it doesnt print right, it prints the previous page (the one with the link to the moodalbox page) and after it the moodalbox page content, but not aligned. Would you know how to solve this printing problem?

Thanks!

95 Raphael / August 28th, 2007, 12:21 / #

I am using this on my site to return a message after the contact form has been submitted. I have 2 problems right now: 1) When I open the moodalbox I lose some of the formatting on my nav links (this may only happen on my Mac in Firefox) 2) I am using togglestyle.js to allow the user to switch the style of the page, and if I am not on the default style, when the moodalbox loads it goes back to the original style, but it doesn’t even load that right…

I would love any thoughts on what is happening - the site is robtarr.net/v2

thanks

96 Rob / August 30th, 2007, 17:36 / #

Thanks for the moodalbox. Are you still developing this thing?

97 Miika / August 31st, 2007, 00:28 / #

[…] MOOdalBox - an HTML Lightbox — e-magine [archives] (tags: javascript mootools ajax lightbox modalbox library effect design web webdesign development css) […]

98 links for 2007-08-30 « napyfab:blog / August 31st, 2007, 01:33 / #

Is it possible to load inline content using moodalbox? If not would you be interested in adding it?

99 Rob / September 9th, 2007, 18:27 / #

Thanks for the moodalbox, so good !

100 Julien / September 12th, 2007, 16:41 / #

[…] contenido remoto usando AJAX (queda lindo además de estar de moda ) y encontre un script llamado MOOdalBox que se basa en el framework Mootools que es una practiquisima libreria de efectos “Web […]

101 Ventana modal con PHP, Ajax y Mootools | Esteban Tundidor / September 12th, 2007, 22:37 / #

This is a very lovely code, do you plan to support the new Mootools 1.2, which should be release very soon.

102 Peter / September 15th, 2007, 04:27 / #

[…] Enlace / Peso: 4.2kb / Framework: Mootools / Descargar […]

104 Colección de clones de Lightbox para todos | aNieto2K / September 19th, 2007, 15:54 / #

It’s not working…. When i click on a link it all goes alright till the moment the page is displayed, it comes the error page… it’s not the link path, cause it’s right….. how could it be??

105 Raphael / September 20th, 2007, 11:01 / #

[…] like the lightbox technique with imagery. A script which can be used with the mootools framework is Moodalbox, all you need to do once setup is add rel=”moodalbox” to your a tag.  Super!  See […]

106 Rob Phillips | Journal | » MOOdal Box testing / September 21st, 2007, 13:00 / #

Hi all

When I saved the following page : http://www.e-magine.ro/playground/moodalbox/

The windows does not appears as exemples even when I modified the source code of html to include CSS / JS / mootools.js / moodalbox.js / IMG

the ” rel = ‘moodalbox’ ” is not working too, i fixed this by using javascript calls method.

Someone can help me to send a form to moodalbox window ?

107 hichem / September 24th, 2007, 10:35 / #

Flash Video Player embeded, in IE7, it does not stop playing if you close the window until video is finished, why is that?

108 Ali / October 4th, 2007, 12:51 / #

great script,
but i have problems in ie6 with flash object included with javascript; why ?

109 daniele / October 16th, 2007, 16:08 / #

Since comments are getting hard to follow, discussion will be moved to the forums:

http://forum.e-magine.ro/forum/moodalbox.

Comments are closed for now.

110 Răzvan Brateş / October 18th, 2007, 12:46 / #

[…] Moodalbox window written by Răzvan Brateş - Romanian freelance web designer/developer for the mootools framework. It is an multipurposes modal window, can be used to display some help document, an extra options page, a registration form, but it unable load images(To the dedicated plugins that already exist, for modularity’s sake) It’s originally based on the excellent code behind Slimbox. […]

111 Web 2.0 modal window featuring lightbox slimbox thickbox lightwindow and moodalbox - chazzuka / October 23rd, 2007, 10:38 / #

[…] Toujours à la recherche d’un bon tutoriel pour apprendre à rafraîchir un contenu en Ajax, je choisis finalement une autre solution assez pratique. L’inclusion d’une iframe dans la LightBlox. l’auteur de cette modification l’a appelé MOOdalBox. […]

112 TheMajesty’s SharePoint Blog » En surfant aujourd'hui, samedi 24-11-2007 / November 24th, 2007, 13:06 / #

[…] to close as popup windos — plus, they don’t get blocked by popup blockers. I currently use MoodalBox for my projects. addthis_url = ‘http%3A%2F%2Fdavidwalsh.name%2Fcreate-javascript-close-link%2F’; […]

113 How To Create A Javascript Close Link / November 28th, 2007, 15:54 / #

[…] MoodalBox es una librería creada para el framework Javascript MooTools que permite desplegar contenido cargado remotamente en una ventana modal con un estilo similar a la famosa librería LightBox. Esta basado en SlimBox y su peso es apenas de 4.2KB (comprimido). […]

114 MOOdalBox - Ventanas Modales Con Javascript Estilo LightBox / December 5th, 2007, 15:35 / #

[…] MoodalBox es una librería creada para el framework Javascript MooTools que permite desplegar contenido cargado remotamente en una ventana modal con un estilo similar a la famosa librería LightBox. Esta basado en SlimBox y su peso es apenas de 4.2KB (comprimido). […]

115 Actualidad, Entretenimiento y Humor » MOOdalBox - Ventanas Modales Con Javascript Estilo LightBox / December 5th, 2007, 15:40 / #

[…]  » original news […]

116 E-magine.ro/web-dev-and-design/36/moodalbox - Tools teasered @ Feed UP !! / December 8th, 2007, 01:35 / #

[…] MOOdalBox: A modal box (inline popup) […]

117 Webmaster 38 » Blog Archive » MOOdalBox: A modal box (inline popup) at ajax scripts compound / January 4th, 2008, 04:11 / #

[…] Foloseşte frameworkul MooTools, dar noutatea adusă în plus faţă de predecesorii săi ( MOOdalBox, Slimbox, Smoothbox etc.) este efectul de zoom ce pleacă din link şi că poate afişa streamuri […]

118 Multibox de la Phatfusion - cea mai recenta generatie de lightbox : din cotidian / January 14th, 2008, 22:13 / #

[…] en la Web encontré MOOdalBox, una librería que utiliza el framework de mootools como base para funcionar pero que permite […]

119 Usando MOOdalBox – un Lightbox para HTML « Codeline / January 18th, 2008, 21:29 / #

[…] Há um clone do ModalBox escrito para uso com o framework Mootools, o MOOdalBox. […]

120 Popups, assistentes e caixas modais com ModalBox | Tecnologia da Informação - Desenvolvimento e Educação / January 23rd, 2008, 13:25 / #

[…] written in javascript, so if it is disabled it will not work. I used a modified version of MoodalBox (which uses Mootools). The reason I had to modify MoodalBox slightly was to […]

121 Cool + Easy Age Verification Tutorial at SkinShare Dev Blog / January 31st, 2008, 04:30 / #

[…] MOOdalBox - an HTML Lightbox — e-magine [archives] A modal box (inline popup), used to display remote content loaded using AJAX, web 2.0 style, written for the mootools framework. It can be used to display some help document, an extra options page, a registration form, etc. (tags: ajax javascript mootools lightbox web2.0 library dialog) […]

122 links for 2008-02-09 | Libin Pan / February 9th, 2008, 08:25 / #

[…] MOOdalBox A modal box (inline popup), used to display remote content loaded using AJAX, web 2.0 style, written for the mootools framework. It can be used to display some help document, an extra options page, a registration form, etc. It eliminates the need of classic popup windows, that may get blocked by popup blockers. […]

123 Cult-foo » 14 cool mootools scripts / February 25th, 2008, 17:45 / #

[…] MOOdalBox has the the honor to be the first featured post on the SkinShare dev blog, with a tutorial on how to make a quick and easy age verification procedure. […]

124 SkinShare tutorial for an age verification using MOOdalBox — e-magine [archives] / February 27th, 2008, 13:25 / #

[…] website is just over a year, the MOOdalBox page just went over 100.000 views and I just cashed in my first AdSense payment – a fabulous […]

125 One year’s statistics - thanks :) — e-magine [archives] / February 29th, 2008, 10:52 / #

[…] Moodalbox : written by Răzvan Brateş used to display remote content loaded using AJAX, web 2.0 style, written for the mootools framework. It can be used to display some help document, an extra options page, a registration form, etc. link […]

126 Web 2.o Round up Modal Window Lightbox Effect Library / March 27th, 2008 (2 weeks ago), 19:14 / #

Post a comment

Comments are closed for this post.

Articles in the Web dev / design category

Quick & dirty fix for Slimbox to attach itself to all images

While implementing yet another a WordPress site, I found myself in the situation where I wanted to display any and all images in lightboxes, but with a minimum of interaction from the editor’s part.

All current plugins that integrate Slimbox (that I know of – this one, for example) actually require the editor to add the [...]

SkinShare tutorial for an age verification using MOOdalBox

MOOdalBox has the the honor to be the first featured post on the SkinShare dev blog, with a tutorial on how to make a quick and easy age verification procedure.

Unfortunately, this is a JavaScript only method – so it’s easily bypassed. I’ll have a version that uses more server-side scripting ready some time soon (for [...]

Tutorial for an AJAX login using MOOdalBox

While browsing the e-magine forums, answering a topic here and there, I discovered very well written and simple to follow tutorial on bulding a modal login dialogue using MOOdalBox. I’m really happy to see such a piece of work – it makes the time I spent writing the scripts even more meaningful. Thank you, Jani [...]

Site / playground / forum downtime :(

As some of you may have noticed (and thanks to those that notified me of the errors), the site was down for two days, the forum had errors, the playground was 404

This was due to a server change I requested because of frequent downtimes on the previous one. However, the new server my site [...]

Vertical MooTools Kwicks (Fx.Elements), using relative sizes

I started out to make a vertical menu using Fx.Elements (instead of the classic horizontal one), for one of the sites I’m working on and, as always, I chose to use relatively sized elements (namely ‘em’).

However, although Fx.Base has support for specifying the unit, the original Kwicks demo doesn’t play well out of the box [...]