js实用弹窗

JS

// JavaScript Document
$.extend({POP:{}});
$.extend($.POP,{
	
	createPop:function(option){
		
		option = $.extend({
			
			title:'标题',
			content:'填写内容'
			},option);
		
		for(var property in option){
			
			if(typeof option[property] != "string" && typeof option[property] != null){
				
				throw new Error("参数类型应为String!");
				return false;
				} 
			};	
		
		//alert(option.content);
		//alert("xx");
		$.POP.add(option.title,option.content);
		$.POP.control();
		$.POP.changeSize();
		},
	
	frame:'<div class="new_window" id="step_window">'
							+'<div class="new_window_head">'
							+'<div class="window_head_name"></div>'
							+'<div class="blue_close" id="step_close"></div>'
							+'</div>'
						+'<div class="new_window_body">'
							+'<div class="package"></div>'
						+'</div>'
					    +'<div class="new_window_foot"></div>'
					+'</div>',
	
	add:function(title,content){
		
		$('body').prepend('<div class="gray"></div>').prepend($.POP.frame);
		
		$('.window_head_name').html(title);
		$('.package').html(content);
		
		$.POP.position();
		},
		
	position:function(){
		
		var marginLeft =  ($(document).width()-$('.new_window').width())/2;
		
		$('.gray').css({'width':'100%','height':$(document).height(),'background':'gray','opacity':0.5,'position':'absolute','min-width':1200,'z-index':9998});
		$('.new_window').css({'top':200,'left':marginLeft});
		},
		
	control:function(){
		
		$('.blue_close').live('click',function(){
			
			$('.new_window').remove();
			$('.gray').remove();
			});
		
		$('.gray').live('click',function(){
			
			$('.new_window').remove();
			$(this).remove();
			});	
			
		var submitBtn = $('.new_window input[type="submit"]')[0] || null;
		
		if(attachEvent && submitBtn != null){

			submitBtn.attachEvent('onclick',function(){
			
				$('.new_window').remove();
				$('.gray').remove();
				});
			}
		},
	
	changeSize:function(){

		$(window).resize(function(){
			
			$.POP.position();
			});
		}
	
	});

CSS

 

.new_window{width:530px;height:auto;position:fixed;	z-index:9999;}
.new_window_head{width:530px;height:80px;background:url(../../images/new_window_head.png) no-repeat;position:relative;}
.new_window_body{width:530px;min-height:100px;background:url(../../images/new_window_body.png) repeat-y;}
.new_window_foot{background:url(../../images/new_window_foot.png) no-repeat;width:530px;height:31px;}
.window_head_name{width:100px;height:30px;margin:22px 0 0 82px;float:left;line-height:30px;overflow:hidden;font-weight:bold;text-align:center;font-family:"微软雅黑";font-size:14px;}
.blue_close{width:22px;height:22px;position:absolute;left:483px;top:24px;cursor:pointer;}
.window_table{width:450px;height:auto;margin:auto;}
.window_table td{border:none;}
.window_table td:first-child{font-weight:bold;font-family:"微软雅黑";}
.window_table td input[type='text']{width:180px;height:22px;border:1px solid #5A7801;line-height:22px;}

 

页面调用

<a href="javascript:;" onClick="$.POP.createPop({title:'标题信息',content:'可以添加任何内容'});">点击试试</a>