目前測試下：支援IE6 火狐 谷歌遊覽器等。
先來看看此元件的基本配置：如下：
targetCls : '.clickElem', // 點選元素
title: '我是龍恩', //視窗標題
">我是龍
先來看看此元件的基本配置：如下：
按Ctrl C 複製程式碼
1. 支援配置標題內容，標題的高度內容的寬度和高度視窗是否可以拖曳彈窗後是否自動關閉是否顯示遮罩背景顏色及透明度的配置，及視窗的展示位置預設x軸0 y軸0是居中對齊，也可以自己配置x軸 y軸的位置但是要注意是相對於父元素那個X軸y軸如果不指定父元素的相對定位那麼預設情況下會相對於document的。當然視窗內容的寬度和高度不建議超過遊覽器的一屏幕的寬度和高度盡量小於第一屏的寬度和高度因為我以前用別人的彈窗插件會存在點擊關閉按鈕後由於遊覽器有滾動條點擊後觸發滾動條事件導致關閉不了視窗如果內容寬度和高度很大的話也沒有關係視窗自動會出現滾動條的。
2. 視窗的內容配置項目 支援四種 1.text（文字） 可以如下配置 text:
我是龍恩
2. img（圖） 可依下列設定 img:http://www.baidu.com/a.jpg
3. id（id節點） 可依下列設定 'id:XX'
4. iframe 可依下列設定 'iframe:http://www.baidu.com(iframe位址)'
所以彈跳窗組件也沒有什麼好說的 當然如果要用到自己的項目中 css樣式可以自己重新寫的，我JS並沒有寫死掉 只是完成JS基本彈窗業務功能。
HTML程式碼如下：
複製程式碼
程式碼如下:
CSS代碼如下
JS程式碼如下
function Overlay(options){
this.config = {
targetCls : '.clickElem', // 点击元素
title: '我是龙恩', // 窗口标题
content : 'text:
我是龙恩
',};
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+= '
' + // 渲染后 回调函数
_config.callback && $.isFunction(_config.callback) && _config.callback();
},
/**
* 显示弹窗
*/
show: function(){
var self = this,
_config = self.config,
_cache = self.cache;
$("#window-box") && $("#window-box").show();
_cache.isshow = true;
if(_config.time == '' || typeof _config.time == 'undefined') {
return;
}else {
t && clearTimeout(t);
var t = setTimeout(function(){
self._closed();
},_config.time);
}
},
/**
* 隐藏弹窗
*/
hide: function(){
var self = this,
_cache = self.cache;
$("#window-box") && $("#window-box").hide();
_cache.isshow = false;
},
/**
* 判断传进来的内容类型
*/
_contentType: function(){
var self = this,
_config = self.config,
_cache = self.cache;
var contentType = _config.content.substring(0,_config.content.indexOf(":")),
content = _config.content.substring(_config.content.indexOf(":")+1,_config.content.length);
switch(contentType) {
case 'text':
$('#window-content').html(content);
break;
case 'id':
$('#window-content').html($('#'+content).html());
break;
case 'img':
$('#window-content').html("");
break;
case 'iframe':
$('#window-content').html('');
$("#window-content-border").css({'overflow':'visible'});
break;
}
},
/**
* 点击关闭按钮
*/
_closed: function(){
var self = this,
_config = self.config,
_cache = self.cache;
if(_cache.isshow) {
self.hide();
}
if(_config.showBg) {
$("#windowbg").hide();
}
$("#windowbg").animate({"opacity":0},'normal');
},
/**
* 显示弹窗的位置 默认情况下居中
*/
_showDialogPosition: function(container) {
var self = this,
_config = self.config,
_cache = self.cache;
$(container).css({'position':'absolute','z-index':_config.zIndex + 1});
var offsetTop = Math.floor(($(window).height() - $(container).height())/2) + $(document).scrollTop(),
offsetLeft = Math.floor(($(window).width() - $(container).width())/2) + $(document).scrollLeft();
// 判断x,y位置默认是不是等于0 如是的话 居中 否则 根据传进来的位置重新定位
if(0 === _config.position.x && 0 === _config.position.y){
$(container).offset({'top':offsetTop, 'left':offsetLeft});
}else{
$(container).offset({'top':_config.position. y,'left':_config.position.x});
}
},
/**
* 下部の背景の高さをレンダリング
*/
_renderDocHeight: function(){
var self = this ,
_config = self.config;
$("#windowbg").animate({"opacity":_config.opacity},'normal');
if(self._isIE6()){
$("#windowbg").css({'background':'#fff','height':$(document).height() 'px','width':$(document).width( ) "px"});
}else {
$("#windowbg").css({'background':_config.bgColor,'height':$(document).height() 'px' ,'width':$(document).width() "px"});
}
},
/*
* 窗口缩放
*/
_windowResize: function(elem){
var self = this,
_config = self.config;
$(window).unbind('resize');
$(window).bind('サイズ変更',function(){
t && clearTimeout(t);
var t = setTimeout(function(){
if(_config.isResize){
self._showDialogPosition(elem);
self._renderDocHeight();
}
},200);
});
},
/**
* ウィンドウがスクロールバーでスクロールするかどうか
*/
_windowIsScroll: function(elem ){
var self = this,
_config = self.config;
$(window).unbind('scroll');
$(window).bind('scroll',function( ){
t && clearTimeout(t);
var t = setTimeout(function(){
if(_config.isScroll){
self._showDialogPosition(elem);
self._renderDocHeight ();
}
},200);
});
},
/**
* ウィンドウの移動
*/
_windowMove: function(){
var self = this,
_config = self.config,
_cache = self.cache;
var MouseX = 0,
MouseY = 0;
$('.window-title ').mouseenter(function(){
$(this).css({'cursor':'move'});
});
$('.window-title').mouseleave (function(){
$(this).css({'cursor':'default'});
});
$('.window-title').mousedown(function(e ){
_cache.moveable = true;
MouseX = e.clientX - $(this).offset().left;
mouseY = e.clientY - $(this).offset().top ;
$('.window-title').css({'cursor':'move'});
});
$(document).mouseup(function(){
if(!_cache.moveable) {
return;
}
$('.window-title').css({'cursor':'default'});
_cache.moveable = false;
});
$('#window-box').mousemove(function(e){
if(_cache.moveable) {
$(this).css ({'left':e.clientX - マウスX 'px','top':e.clientY - マウスY 'px'});
}
});
},
/*
* 判断はIE6游览器
* @return {Boolean}
*/
_isIE6: function(){
return navigator.userAgent .match(/MSIE 6.0/)!= null;
}
};
