JS代码如下
复制代码 代码如下:
/**
* 编写JS弹窗组件
* @date 2013-12-10
* @author tugenhua
* @email 879083421@qq.com
*/
function Overlay(options){
this.config = {
targetCls : ".clickElem", // 点击元素
title: "我是龙恩", // 窗口标题
content : "text:
我是龙恩
",//content : "img:http://gtms01.alicdn.com/tps/i1/T1USkqFc0dXXb5rXb6-1060-300.jpg",
// 窗口内容 {text:具体内容 | id:id名 | img:图片链接 |
// iframe:src链接} {string}
width: 400, // 内容的宽度
height : 300, // 内容的高度
theight : 30,// 标题的高度 默认为30
drag : true, // 是否可以拖动 默认为true
time : 3000, // 自动关闭窗口的时间 为空或者"undefined"则不关闭
showBg : true, // 设置是否显示遮罩层 默认为true 遮罩
closable : "#window-close", // 关闭按钮
bgColor : "#000", // 默认颜色
opacity : 0.5,// 默认透明度
position : {
x: 0,
y: 0 //默认等于0 居中
},
zIndex : 10000,
isScroll : true, //默认情况下 窗口随着滚动而滚动
isResize : true, // 默认情况下 随着窗口缩放而缩放
callback : null//弹窗显示后回调函数
};
this.cache = {
isrender : true, // 弹窗html结构只渲染一次
isshow: false, // 窗口是否已经显示出来
moveable : false
};
this.init(options);
}
Overlay.prototype = {
constructor: Overlay,
init: function(options){
this.config = $.extend(this.config,options || {});
var self = this,
_config = self.config,
_cache = self.cache;
$(_config.targetCls).each(function(index,item){
$(item).unbind("click");
$(item).bind("click",function(){
// 渲染弹窗HTML结构
self._renderHTML();
// 窗口移动
self._windowMove();
});
});
// 窗口缩放
self._windowResize("#window-box");
// 窗口随着滚动条一起滚动
self._windowIsScroll("#window-box");
},
/*
* 渲染弹窗HTML结构
*/
_renderHTML: function(){
var self = this,
_config = self.config,
_cache = self.cache;
var html ="";
if(_cache.isrender) {
html+= "
" +"
";$("body").append(html);
$("#windowbg").css("z-index",_config.zIndex);
$("#window-content-border").css({"width":_config.width + "px","height":_config.height + "px","overflow":"auto"});
$(".window-title h2").html(_config.title);
$(".window-title").css({"height":_config.theight + "px","width":_config.width,"overflow":"hidden
