[JavaScript] jQueryのモーダル系の軽量なもの(Minifyで約5KB)を自作（整えればもっと軽量化できそう）。「外部CSSや画像を使うのは面倒！」って人向けに、JSのみである程度デザインされたモーダルを表示。インライン、画像、SWF、iFrame（外部リンク）に対応。ブラウザはIE7以上。

jquery.adomodal.js

(function($){
	var adoModal_initialized=false;
	$.fn.extend({
		adoModal:function(options){
			if($.browser.msie && $.browser.version<=6){
				return false;
			}
			
			options=$.extend({
				fade:100,
				overlay:0.5,
				overlayclick:true,
				width:null,
				height:null,
				close:true
			},options);
			
			var opened=false,ajax,tmpl,body,wrap,inner,content,overlay,close,loader,ifr;
			
			function init(){
				if(!adoModal_initialized){
					tmpl={
						image: '<img src="{href}" width="" height="" />',
						iframe: '<iframe frameborder="0" hspace="0"' + ($.browser.msie ? ' allowtransparency="true"' : '') + ' width="{width}" height="{height}"></iframe>',
						swf:'<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%"><param name="wmode" value="transparent" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="{href}" /><embed src="{href}" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="100%" height="100%" wmode="transparent"></embed></object>'
					};
					
					body=$('body');
					wrap=$('<div style="display:none;position:fixed;opacity:0;z-index:102;left:50%;top:50%;background-color:#fff;border-style:solid;border-width:0 1px 1px 0;border-color:rgba(0,0,0,.6);-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;"></div>');
					inner=$('<div style="position:relative;padding:10px;"></div>');
					content=$('<div style="overflow:auto;"></div>');
					overlay=$('<div style="display:none;position:fixed;z-index:100;top:0px;left:0px;height:100%;width:100%;background:#000;"></div>').click(function(){
						if(!options.overlayclick){
							return false;
						}
						$.adoModal.close();
					});
					close=$('<a href="#" style="display:block;width:16px;height:16px;margin:0;padding:0;position:absolute;top:-10px;right:-10px;font-family:sans-serif;font-size:12px;font-weight:bold;color:#fff;line-height:16px;text-align:center;text-decoration:none;background-color:#000;cursor:pointer;border:2px solid #fff;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;">&#215;</a>').click(function(){
						$.adoModal.close();
						return false;
					});
					loader=$('<div style="display:none;width:100%;margin:0;padding:0;position:fixed;z-index:101;top:0;left:0;text-align:center;"></div>').append($('<a href="#" style="display:block;width:120px;height:20px;margin:0 auto;padding:0;font-size:12px;font-weight:bold;color:#fff;line-height:20px;text-decoration:none;background-color:red;-moz-border-radius:0 0 5px 5px;-webkit-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;" title="Close">Loading..</a>').click(function(){
						if(ajax){
							ajax.abort();
						}
						overlay.hide();
						wrap.hide();
						opened=false;
						return false;
					}));
				
					$.adoModal={
						'show':function(html,width,height){
							if(opened){
								return false;
							}

							if(html && (!width || !height)){
								var dummy=$('<table border="0" cellspacing="0" cellpadding="0" style="display:none"><tr><td>'+html+'</td></tr></table>');
								body.append(dummy);
								width=dummy.outerWidth();
								height=dummy.outerHeight();
								dummy.remove();
							}

							if(wrap.is(':visible')){
								content.animate({'width':width,'height':height},200,function(){
									opened=true;
								}).html(html);
								wrap.animate({'margin-left':'-'+(Math.round(width/2)+10),'margin-top':'-'+(Math.round(height/2)+10)+'px'},200);
							}else{
								if(!overlay.is(':visible')){
									overlay.fadeTo(options.fade,options.overlay);
								}
								if(typeof html=='string'){
									content.css({'width':width+'px','height':height+'px'}).html(html);
								}else{
									content.css({'width':width+'px','height':height+'px'}).append(html);
								}
								wrap.css({
									'margin-left':'-'+(Math.round(width/2)+10)+'px',
									'margin-top':'-'+(Math.round(height/2)+10)+'px'
								}).fadeTo(options.fade,1,function(){
									loader.hide();
									opened=true;
								});
							}
						},
						'html':function(html,width,height){
							if(!html){
								this.resize(width,height);
							}else{
								opened=false;
								this.show(html,width,height);
							}
						},
						'resize':function(width,height){
							if(!opened){
								return false;
							}
							content.animate({'width':width,'height':height},200);
							wrap.animate({'margin-left':'-'+(Math.round(width/2)+10),'margin-top':'-'+(Math.round(height/2)+10)+'px'},200);
						},
						'close':function(){
							if(!opened){
								return false;
							}
							overlay.fadeOut(options.fade);
							wrap.fadeOut(options.fade,function(){
								content.html('');
								if(ifr){
									ifr.remove();
								}
								opened=false;
							});
						}
					};
				}
			}
			
			var objs=this.each(function(){
				var t=$(this);
				
				if(this.tagName.toUpperCase()=='A'){
					var href=this.href;
				}else{
					var href=t.data('href');
					if(!href){
						return false;
					}
				}
				
				var size=t.data('modal-size');
				if(size){
					var sp=size.split('x');
					var width=Number(sp[0]);
					var height=Number(sp[1]);
				}else{
					var width=options.width ? Number(options.width) : null;
					var height=options.height ? Number(options.height) : null;
				}
				
				t.click(function(e){
					if(href.match(/(\#[^\/]+)$/)){
						var target=$(RegExp.$1).hide();
						if(target.size()){
							overlay.fadeTo(options.fade,options.overlay);
							var dummy=$('<div></div>');
							var clone=target.clone().show();
							$.adoModal.show(dummy.append(clone).html(),width,height);
							clone.remove();
						}
					}else if(href.match(/\.(jpe?g|gif|png)$/i)){
						overlay.fadeTo(options.fade,options.overlay);
						loader.show();
						$('<img />').attr('src',href).appendTo(body).load(function(){
							$(this).remove();
							var tp=tmpl.image.replace('{href}',href);
							if(width){
								tp.replace(/\{width\}/g,width);
							}else{
								tp.replace(/\{width\}/g,'');
							}
							if(height){
								tp.replace(/\{height\}/g,height);
							}else{
								tp.replace(/\{height\}/g,'');
							}
							$.adoModal.show(tp,width,height);
						}).error(function(){$(this).remove();});
					}else if(href.match(/\.(swf)$/i)){console.log(tmpl.swf);
						var tp=tmpl.swf.replace(/\{href\}/g,href);
						$.adoModal.show(tp,width,height);
					}else if(href.match(new RegExp('^https?://'+document.domain,'i'))){
						overlay.fadeTo(options.fade,options.overlay);
						loader.show();
						ajax=$.ajax({
							url:href,
							type:'get',
							dataType:'html',
							complete:function(res){
								loader.hide();
							},
							success:function(res){
								$.adoModal.show(res,width,height);
							},
							error:function(XMLHttpRequest,textStatus,errorThrown){
								//console.log(XMLHttpRequest.responseText);
							}
						});
					}else{
						overlay.fadeTo(options.fade,options.overlay);
						loader.show();
						width=(width) ? width : 500;
						height=(height) ? height : 500;
						var tp=tmpl.iframe.replace(/\{width\}/g,width).replace(/\{height\}/g,height);
						ifr=$(tp).attr('src',href).hide();
						body.append(ifr);
						ifr.load(function(){
							loader.hide();
							$.adoModal.show(ifr.show(),width,height);
						});
					}
					
					e.preventDefault();
				});
			});
			
			if(!adoModal_initialized){
				init();
				if(options.close){
					inner.append(content,close);
				}else{
					inner.append(content);
				}
				body.append(overlay,wrap.append(inner),loader);
				adoModal_initialized=true;
			}
			
			return objs;
		}
	})
})(jQuery);