This MooTools javascript window modal overlay window is designed to look similar to the modal used by a prominent social networking site. I had been using the awesome MochaUI for modals, but I decided to develop my own lightweight solution after reading this blog post by David Walsh. I based the CSS and functionality off of his original code, but I enhanced the javascript by making it object oriented and leveraging mootools to create the DOM elements on the fly. I also added a few other helpful methods. It uses mootools 1.2.4 and has not been tested with other versions of mootools. It works well enough in most browsers (tested in FireFox, Chrome, and IE 6/7/8). Click here to view the demo.
*Updated for version 0.9.3
Issues within Internet Explorer 6 and 7 have now been resolved thanks to the work done by K.J. Ye.
Add in the HTML
1 2 3 | <script type="text/javascript" src="/js/mootools-1.2.4-core.js"></script> <link rel="stylesheet" media="screen" href="/mootools/fb-modal/style.css" type="text/css" /> <script type="text/javascript" src="/mootools/fb-modal/FbModal.class.js"></script> |
Construct the Object
1 2 3 4 5 6 7 8 9 10 11 12 | var modal; window.addEvent('domready',function(){ modal = new FbModal({ 'parentEl': 'Content', 'title': 'My Modal', 'subTitle': 'This is the FB Modal demo.', 'content': 'Lorem ipsum dolor sit amet...', 'height' : 330, 'width' : 800 }); }); |
The objects constructor automatically creates the modal and displays it. The same modal can subsequently be called like this:
1 | modal.drawModal(); |
Changing the title, subtitle, and body
1 2 3 | modal.setTitle('My new title'); modal.setSubTitle('a new subtitle'); modal.setContent('Some new content'); |
Save and Close buttons plus destroy
By default the modal will create a close button. You can override this in the constructors options by setting closeButton: false.
1 2 3 | modal.createCloseButton(); // creates a close button modal.createSaveButton('SaveButtonId','Save Button Value'); // creates a save button with id: SaveButtonId and value: Save Button Value modal.destroy(); // destroys/hides the modal. |
Creating a new modal while one is open
1 2 3 4 5 6 7 8 9 10 11 12 | if(typeof(modal) == 'object'){ modal.destroy(); } modal = new FbModal({ 'parentEL': 'Content', 'title': 'New Email', 'subTitle': 'Recently retrieved from email server', 'content': this.response.text, 'height' : 330, 'width' : 800 }); |
Changing content and what the Save button does
1 2 3 4 5 6 7 8 9 10 11 12 13 | modal.setContent(this.response.text); modal.destroySaveButton(); modal.createSaveButton('SaveUser','Add User'); $('SaveUser').addEvent('click',function(){ new Request({ url: location.href, method: 'get', onComplete: function(){ // blah some code } }).send('action=SaveUser'); }) |
This is still kinda beta even though I’m using it in a project. If you like it or find any bugs reply to this blog post. Thanks.
Related posts:
hello,
nice tool but i do not get it to run in IE7
PS:
missing an outsideclick-close and the possibilitiy to move the window
Hmm, for what I was doing I commented-out the outsideclick-close. In the next version I’ll allow it to be setup by an option bool. I’ll have to debug for IE7. Thanks.
Hi Chris,
Nice script! one improvement I could suggest is to make the parent $(‘Content’) div dynamic, either created on the fly and attach to doc.body or make the ID of the parent div a property on the fbModal object… I didn’t notice any reference to the need for the [div class="Content" id="Content"] to be in the doc structure, else it won’t work! This one caught me out for a while…
Mr B
Bretton, this is true. I forgot to add this to the documentation and yes I should make it dynamic as in something you can set while instantiating the object so the class is not forcing you to name your IDs a certain way. Thanks!
The IE6/7 issues is a bit of a problem for me… will keep an eye out for it’s resolution…
Yeah I wish I could debug in those browsers but I run ubuntu 10 and am having difficulty getting vmware working to test in ie 6 and 7. I’m sure its just something minor.
IE8 has some bugs too although it is more stable than IE7 and IE6..`
Hi could you give directions to manage a form inside the modal and display in the same modal the result after php control ?
Arnaud – Are you submitting the form via an AJAX get/post or are you submitting it via a standard post? Give me a better idea of what you’re doing and feel free to post some code inside a pastebin and reply with the link. Thanks.
Hi Chris,
In fact I was using modal box (the one with prototype.js – http://okonet.ru/projects/modalbox/). I am aslo using joomla and there is a concern for IE 8 to manage both mootools and prototype.js
Anyways I am trying to replace modal box with something with the same possibilities.
So I have a first page in which I have some html links.
I would like to open a box when i click on these links.
This box should display an html form. When I submit I would like to dysplay the result in this box after a php control and html result generation
I have no really idea on how it works with your box in fact.
To submit the form I was using a javascript modal box option on a html button link :
onclick=”Modalbox.show(this.href, {title: this.title , method:’post’, params:Form.serialize(‘myform’), width: 600}); return false;”
I could imagine it is an ajax call.
With fbmodal you just set your html for content when instantiating the object. Then for save a button to submit the form just add an event to the button and inside that event put in the mootools ajax code for submitting the form. Pretty simple process, I can post some example code though if that doesn’t make sense.
Hi,
I’m trying to implement your modalbox, but I can’t seem to get it working. I’ve included te mootools an fbmodal.class.js in the head(using the files from your website, not those from mootools) And added the domready function but all i get in my Firebug is a notice saying “l is null” on line 138.
I hope you can help me with this.
Thanks in advance!
p.s. I can’t contact you under contact, PHP is shouting that the phpmailer couldn’t be found, just to let you know
“l is null” thats a pretty strange error. Have you tried mimicking whats in the demo page (http://www.cnizz.com/mootools/fb-modal/) ? And yes, I have yet to fix my contact page since migrating to a new server, its just missing the phpmailer class but I’m lazy
Is there a way you can pastebin your code or perhaps email the page you’re working on so I can take a look? It should also be noted that FbModal has problems in IE 6/7, but a patch is in the works and should released very soon.
Released verrsion 0.9.3 which fixes the IE 6 and IE 7 bugs.
Hi Chris,
Thx for the ever so quick response
. I have the modalbox working (I was missing the parentEl… :S) Another tiny question. Is it possible to feed a form into the content of the modalbox, most preferably by using a call to a website?
Thanks in advance!
Niels Lemmens
Yes, the next version I create will get rid of the annoying “bug” mentioned by Brenton earlier. I’ve received a number of questions regarding adding the form. You should be able to add whatever html you like by setting the content variable either when you create the fbmodal object ie:
or using the modal setter for content:
Then set an event on the save button to xhr the data to the server.
This is getting asked enough that I will add this specifically to the blog post.