简单js 弹窗插件和基本调用方法

// 弹窗插件 基本调用方法
/*基于content可进行弹窗内容扩展
 * $("input").AreaSelector({ content:"<a href='#'>1111</a>", isShade:false });
 */
(function($) {
$.fn.AreaSelector = function(optins) {
var defaults = {
width : "400",
height : "300",
bgcolor : "#ece9d8",
opacity : "0.75",
zIndex : 1000,
content : "",
isShade : true
};
var opts = $.extend(defaults, optins);
var bgdiv = $("<div></div>").css(
{ "position" : "absolute",
"top" : "0",
"background" : "red",
"filter" : "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75)",
"opacity" : "0.6",
"width" : $(window).width(),
"height" : $(window).height(),
"z-index" : 999
});
var boxdiv = $("<div></div>")
.addClass("hide")
.css({   "position" : "absolute",
"align" : "center",
"background" : opts.bgcolor,
"filter" : "progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100)",
"opacity" : opts.opacity,
"width" : opts.width,
"height" : opts.height,
"z-index" : opts.zIndex,
"display" : "none"
});
boxdiv.append(opts.content);
// 初始化
var init = function(evt, opts) {
var offset = $(evt.target).offset();
boxdiv.css({
top : offset.top + 5 + $(evt.target).height() + "px",
left : offset.left
});
// boxdiv.toggle('slow');
boxdiv.toggle();
};
var hidDiv = function() {
// boxdiv.slideUp('slow');
boxdiv.hide(0);
};


var hidBgDiv = function() {
bgdiv.remove();
};
return this.each(function() {
var $this = $(this);
$this.after(boxdiv);
$this.click(function(evt) {
// 取消事件冒泡
evt.stopPropagation();
if (opts.isShade) {
$("body").append(bgdiv);
}
init(evt, opts);
});
$(document).click(function(event) {
hidDiv();
hidBgDiv();
});
boxdiv.click(function(evt) {
evt.stopPropagation();
});
});
};
})(jQuery);