动态生成一个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)