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? 
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!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
| 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').visibility('visible');}}catch(err){};
return false;
}
try{if(IE6){$('body').find('select').visibility('hidden');}}catch(err){};
$('body').append('<div id="ntz_overlay"></div>');
$('#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('<div id="ntz_modal"></div>');
$('#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);
$('*').blur();
$('#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
)
