A VERY nice Modal box

How many times did you need a light modal box? To display an error mesage, a picture or even another web page inside of the current page? And every single time, you ended with using a large-full-of-useless-options script. Yeah, i know the feeling. Seriously, i know it VERY well. That’s why i wrote this piece of code to display modal boxes :) Anyhow, this works BEST with AJAX content ;)

UPDATES: known issues

If you need to display more content than fit into a screen height, you won’t see the content after the fold. To fix this, just remove the scroll bind on document:

(document).bind('scroll', function(){
		$('#ntz_modal').css({
			top:$(document).scrollTop()
		});
	});

How to use?

Just call with modalBox('content', 200) where content is what do you want to display (which can be an ajax result) and 200 is the width of the modal box. If you don’t specify any width, the default value (350) is used.

How to close the modal box?

Well… Just call the function modalBox(). When no parameter is passed, then the modal goes off. Nice, isn’t it? :D

Browser compatibility

The script was tested in FF 2, FF 3, IE 6, IE 7, Safari (on Win), Opera 9.5. If you don’t know what these letter means, there is a very high probability to don’t need this snippet ;)

Selectboxes on IE6 – how they are managed?

Very simple: i hide ALL selects when modal is shown and i show them back when modal is destroyed. Ofcourse, you can use bgiframe plugin. Which is

Requirements

The script is tested with last version of jQuery (1.2.6) but should work fine with previous (and ofcourse next) versions. If you use an ancient version, you may need some extra plugins (like dimensions)

What’s the cost?

Prepare you credit card, prepare you paypal account or whatever you want. Because this is totally FREE. You may use, modify and distribute whatever you like. A small link back would be nice (but NOT mandatory).

You bastard! You use your name in modal elements! Yeah, so? No, seriously, i used this way because there is no way to know what div did you use. And the chance to have a div called ntz_modal in your code is kinda.. hmm… Right! ZERO! Of course, you can change these ID’s whatever you like it :)

How do I get the code?

Keep reading!

var IE6 = false /*@cc_on || @_jscript_version < 5.7 @*/;
function modalBox(content, width, callback) {
	if(!content){
		$('#ntz_modal').remove();
		$('#ntz_overlay').fadeOut(function(){$(this).remove();});
		try{if(IE6){$('body').find('select.unhideThis').removeClass('unhideThis').visibility('visible');}}catch(err){};
		$('embed.unhideThis, object.unhideThis').removeClass('unhideThis').css('visibility', 'visible');
		return false;
	}
	try{if(IE6){$('body').find('select:visible').addClass('unhideThis').visibility('hidden');}}catch(err){};
	$('embed:visible, object:visible').addClass('unhideThis').css('visibility', 'hidden');
	$('body').append('
'); $('#ntz_overlay').css({ width : '100%', height : $(document).height(), position : 'absolute', left : 0, top : 0, backgroundColor : '#FFFFFF', zIndex : 9990, opacity : 0 }).fadeTo(200, 0.5); $('body').append('
'); $('#ntz_modal').css({ border : '1px solid #2d7abb', width : width ? width : 350, backgroundColor : '#FFFFFF', position : 'absolute', left : '50%', top : $(document).scrollTop(), zIndex : 9995, marginLeft : -(Math.ceil((width ? width : 800)/2)) }).append(content); $('#ntz_modal a:eq(0), #ntz_modal input, #ntz_modal textarea').focus(); try{ callback.call(); }catch(err){}; $(document).bind('scroll', function(){ $('#ntz_modal').css({ top:$(document).scrollTop() }); }); };


Note: the example is VERY intrusive :D

11 thoughts on “A VERY nice Modal box

  1. hmm, when you have scrolled down and initialize the modal it takes you top.

    Oh, yeah, i forgot to return false on the link :D My bad

  2. Oups :D I didn’t pay attention to keyboard navigation :( Anyhow, now is fixed and first link/input/textarea from the modal box is focused. Thanks for telling me ;)

  3. Nice code – but is there any way you can show me how to load an external file such as .html, rather than use content embedded into the main page?

    thanks ;)

  4. Hi there! I was searching for a while for this pice of code… very nice, and easy. Well, I can add a few lines of code to let load external pages.
    I was using iFrame so, this part of code work very well.

    1. cap=content.slice(0,4);
    2. if (cap.toLowerCase()==’http’) content = ‘El navegador que posee no soporta iFrames.';

    Its works only if in your content parsed find in it first 4 chars http leyend. So, automatically load an iFrame and get content from outside.

    I hope this can help to get a better version… ;) Salute from Argentina, Amigo!

  5. Hello Squibs, thanks for comment.
    I just tested and it’s fine on IE6 and IE7. On IE8 there was a small problem, ideed, but I fixed. What kind of problems do you encounter?

  6. thx for this super lightweight script :) works awesome.. one thing that i had to change was binding scroll event to window instead of document – that fixed modal scrolling in ie7&8

Leave a Reply