动态生成一个div带有按钮和关闭的

/**
 * 定义模式框插件
 */
(function($){
/**
* 关闭
*/
$.extend($.fn,{
closemodal:function(){
$("#simplemodal").slideUp("fast",function(){
$("#simplemodal_mask").fadeOut("fast",function(){
$("#simplemodal").remove();
$(this).remove();
})
})
},
simplemodal:function(settings){
/**
* 插件的默认值
*/
var defaults=$.extend({
title:"标题啊",
context:"这是内容",
url:"",
button:[]
},settings);
//simplemodal基本结构
var simplemodalStr='<div id="simplemodal">\
<div class="title">\
<span>标题</span>\
<lable class="close"><img src="images/u115.png" ></lable>\
</div>\
<div class="content"></div>\
<div style="clear:both;"></div>\
<div class="button">\
</div>\
</div>';
var maskStr='<div id="simplemodal_mask"></div>';
var simplemodal=$(simplemodalStr).appendTo("body").hide();
simplemodal.css("min-height","0px");
var mask=$(maskStr).appendTo("body").hide();
//让模式框可以拖拽
simplemodal.draggable({handler:'.title'})
//循环生成按钮
$.each(defaults.button,function(){
var btn=$('<a class="simplemodal_btn"></a>').html(this.text);
btn.bind("click",this.handler);
simplemodal.find("div.button").append(btn);
})
 
mask.fadeIn("fast",function(){
simplemodal.slideDown("fast");
})
 
//绑定事件
simplemodal.find("lable.close").bind("click",function(){
$.fn.closemodal();
});
//给mask淡入显示动画效果
 
var left=($(document).width()-simplemodal.width())/2;
var top=($(document).height()-simplemodal.height())/2;
simplemodal.css("left",left);
simplemodal.css("top",top-130);
//更改字体
simplemodal.find("div.title span").html(defaults.title);
if(defaults.url!=""){
simplemodal.find("div.content").load(defaults.url);
}else{
simplemodal.find("div.content").html(defaults.context);
}
}
});
})(jQuery)