js實現(xiàn)彈窗插件功能實例代碼分享
目前測試下：支持IE6+ 火狐 谷歌游覽器等。
先來看看此組件的基本配置項：如下：
this.config = {
targetCls : '.clickElem', // 點擊元素
title: '我是龍恩', // 窗口標(biāo)題
content : 'text:<p style="width:100px;height:100px">我是龍</p>',
//content : 'img:http://www.baidu.com/a.jpg',
// 窗口內(nèi)容 {text:具體內(nèi)容 | id:id名 | img:圖片鏈接 |
// iframe:src鏈接} {string}
width: 400, // 內(nèi)容的寬度
height : 300, // 內(nèi)容的高度
theight : 30,// 標(biāo)題的高度 默認(rèn)為30
drag : true, // 是否可以拖動 默認(rèn)為true
time : 3000, // 自動關(guān)閉窗口的時間 為空或者'undefined'則不關(guān)閉
showBg : true, // 設(shè)置是否顯示遮罩層 默認(rèn)為true 遮罩
closable : '#window-close', // 關(guān)閉按鈕
bgColor : '#000', // 默認(rèn)顏色
opacity : 0.5,// 默認(rèn)透明度
position : {
x: 0,
y: 0 //默認(rèn)等于0 居中
},
zIndex : 10000,
isScroll : true, //默認(rèn)情況下 窗口隨著滾動而滾動
isResize : true, // 默認(rèn)情況下 隨著窗口縮放而縮放
callback : null//彈窗顯示后回調(diào)函數(shù)
};
JS編寫簡單的彈窗插件(含有demo和源碼)
2013-12-11 22:30 by 龍恩0707, 409 閱讀, 1 評論, 收藏, 編輯
最近項目做完了 事情不是很多，今天正好也在調(diào)休，所以趁著這個時間研究了一下簡易的JS彈窗功能，當(dāng)然網(wǎng)上這塊插件非常多，本人也沒有仔細(xì)看網(wǎng)上的插件源碼 只是憑著日常使用過的彈窗插件有這么多功能 來實現(xiàn)自己的彈窗思路，當(dāng)然我這個可能實現(xiàn)了基本功能，那么如果想做的更好 更完善需要以后繼續(xù)優(yōu)化！如果有不足之處！請大家多多諒解！
由于彈窗大家都知道是個什么樣的 所以這次沒有做演示效果圖！目前測試下：支持IE6+ 火狐 谷歌游覽器等。
先來看看此組件的基本配置項：如下：
按 Ctrl+C 復(fù)制代碼
按 Ctrl+C 復(fù)制代碼
1. 支持配置標(biāo)題 內(nèi)容，標(biāo)題的高度 內(nèi)容的寬度和高度 窗口是否可以拖動 彈窗后是否自動關(guān)閉 是否顯示遮罩背景 顏色 及 透明度的配置，及窗口的展示位置 默認(rèn)x軸0 y軸0是居中對齊，也可以自己配置x軸 y軸的位置 但是要注意是相對于父元素那個X軸 y軸 如果不指定父元素的相對定位 那么默認(rèn)情況下會相對于document的。當(dāng)然窗口內(nèi)容的寬度和高度不建議超過游覽器的一屏幕的寬度和高度 盡量小于第一屏的寬度和高度 因為我以前用別人的彈窗插件會存在點擊關(guān)閉按鈕后 由于游覽器有滾動條 點擊后觸發(fā)滾動條事件 導(dǎo)致關(guān)閉不了窗口 如果內(nèi)容寬度和高度很大的話 也沒有關(guān)系 窗口自動會出現(xiàn)滾動條的。
2. 窗口的內(nèi)容配置項 支持四種 1.text（文本） 可以如下配置 text:<p style="width:100px;height:100px">我是龍恩</p>
2. img（圖片） 可以如下配置 img:http://www.baidu.com/a.jpg
3. id（id節(jié)點） 可以如下配置 'id:XX'
4. iframe 可以如下配置 'iframe:http://www.baidu.com(iframe地址)'
3. 提供彈窗后回調(diào)函數(shù)： 如彈窗后可以做自己想做的事情。
所以彈窗組件也沒有什么好說的 當(dāng)然如果要用到自己的項目中 css樣式可以自己重新寫的，我JS并沒有寫死掉 只是完成JS基本彈窗業(yè)務(wù)功能。
HTML代碼如下：
<div class="clickElem" style="margin-top:10px;">我是龍恩 請點擊我</div>
<div class="clickElem" style="margin-top:10px;">我是龍恩 請點擊我</div>
CSS代碼如下
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif;}
label{cursor:pointer;}
#window-box{border:5px solid #E9F3FD;background:#FFF;}
.windown-title{position:relative;height:30px;border:1px solid #A6C9E1;overflow:hidden;background:url(images/tipbg.png) 0 0 repeat-x;}
.window-title h2{padding-left:5px;font-size:14px;color:#666;}
#window-close{position:absolute;right:10px;top:8px;width:10px;height:16px;text-indent:-10em;overflow:hidden;background:url(images/tipbg.png) 100% -49px no-repeat;cursor:pointer;}
#window-content-border{padding:5px 0 5px 5px;}
</style>
JS代碼如下
/**
* 編寫JS彈窗組件
* @date 2013-12-10
* @author tugenhua
* @email 879083421@qq.com
*/
function Overlay(options){
this.config = {
targetCls : '.clickElem', // 點擊元素
title: '我是龍恩', // 窗口標(biāo)題
content : 'text:<p style="width:100px;height:100px">我是龍恩</p>',
//content : 'img:http://gtms01.alicdn.com/tps/i1/T1USkqFc0dXXb5rXb6-1060-300.jpg',
// 窗口內(nèi)容 {text:具體內(nèi)容 | id:id名 | img:圖片鏈接 |
// iframe:src鏈接} {string}
width: 400, // 內(nèi)容的寬度
height : 300, // 內(nèi)容的高度
theight : 30,// 標(biāo)題的高度 默認(rèn)為30
drag : true, // 是否可以拖動 默認(rèn)為true
time : 3000, // 自動關(guān)閉窗口的時間 為空或者'undefined'則不關(guān)閉
showBg : true, // 設(shè)置是否顯示遮罩層 默認(rèn)為true 遮罩
closable : '#window-close', // 關(guān)閉按鈕
bgColor : '#000', // 默認(rèn)顏色
opacity : 0.5,// 默認(rèn)透明度
position : {
x: 0,
y: 0 //默認(rèn)等于0 居中
},
zIndex : 10000,
isScroll : true, //默認(rèn)情況下 窗口隨著滾動而滾動
isResize : true, // 默認(rèn)情況下 隨著窗口縮放而縮放
callback : null//彈窗顯示后回調(diào)函數(shù)
};
this.cache = {
isrender : true, // 彈窗html結(jié)構(gòu)只渲染一次
isshow: false, // 窗口是否已經(jīng)顯示出來
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結(jié)構(gòu)
self._renderHTML();
// 窗口移動
self._windowMove();
});
});
// 窗口縮放
self._windowResize('#window-box');
// 窗口隨著滾動條一起滾動
self._windowIsScroll('#window-box');
},
/*
* 渲染彈窗HTML結(jié)構(gòu)
*/
_renderHTML: function(){
var self = this,
_config = self.config,
_cache = self.cache;
var html ='';
if(_cache.isrender) {
html+= '<div id="windowbg" style="display:none;position:absolute;top:0;left:0;"></div>' +
'<div id="window-box" style="display:none;overflow:hidden;">' +
'<div class="window-title"><h2></h2><span id="window-close">關(guān)閉</span></div>'+
'<div id="window-content-border"><div id="window-content"></div></div>' +
'</div>';
$('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'});
_cache.isrender = false;
// 判斷傳遞進(jìn)來的內(nèi)容格式
self._contentType();
if(_config.showBg) {
// 渲染背景寬度和高度
self._renderDocHeight();
$("#windowbg").show();
self.show();
}else {
$("#windowbg").hide();
self.show();
}
self._showDialogPosition("#window-box");
}else {
// 如果彈窗已經(jīng)創(chuàng)建出來的話, 只是隱藏掉了, 那么我們顯示出來
self.show();
$("#windowbg").animate({"opacity":_config.opacity},'normal');
if(_config.showBg) {
$("#windowbg").show();
}
self._showDialogPosition("#window-box");
}
$(_config.closable).unbind('click');
$(_config.closable).bind('click',function(){
// 點擊關(guān)閉按鈕
self._closed();
});
// 渲染后 回調(diào)函數(shù)
_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;
},
/**
* 判斷傳進(jìn)來的內(nèi)容類型
*/
_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("<img src='"+content+"' class='window-img'/>");
break;
case 'iframe':
$('#window-content').html('<iframe src="'+content+'" width="100%" height="100%" scrolling="yes" frameborder="0"></iframe>');
$("#window-content-border").css({'overflow':'visible'});
break;
}
},
/**
* 點擊關(guān)閉按鈕
*/
_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');
},
/**
* 顯示彈窗的位置 默認(rèn)情況下居中
*/
_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位置默認(rèn)是不是等于0 如是的話 居中 否則 根據(jù)傳進(jìn)來的位置重新定位
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('resize',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 - mouseX + 'px','top':e.clientY - mouseY + 'px'});
}
});
},
/*
* 判斷是否是IE6游覽器
* @return {Boolean}
*/
_isIE6: function(){
return navigator.userAgent.match(/MSIE 6.0/)!= null;
}
};
相關(guān)文章
下面小編就為大家?guī)硪黄猨s實現(xiàn)字符全排列算法的簡單方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
Bootstrap學(xué)習(xí)筆記之js組件（4）
這篇文章主要為大家詳細(xì)介紹了Bootstrap學(xué)習(xí)筆記之js組件,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-06-06
微信小程序?qū)崿F(xiàn)多個按鈕的顏色狀態(tài)轉(zhuǎn)換
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)多個按鈕的顏色狀態(tài)轉(zhuǎn)換，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-02-02
用js讀、寫、刪除Cookie代碼分享及詳細(xì)注釋說明
JavaScript是運(yùn)行在客戶端的腳本，因此一般是不能夠設(shè)置Session的，因為Session是運(yùn)行在服務(wù)器端的。而cookie是運(yùn)行在客戶端的，所以可以用JS來設(shè)置cookie. 下面我們來分析下案例2014-06-06
這篇文章主要介紹了微信小程序開發(fā)之IOS和Android兼容的問題的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-09-09
下面小編就為大家?guī)硪黄畔L動效果的實例講解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要為大家詳細(xì)介紹了BootStrap表單時間選擇器的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實現(xiàn)五子棋游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
根據(jù)iframe中src屬性是同域鏈接還是跨域鏈接，通信方式也不同,下面有個不錯的示例，需要的朋友可以參考下2014-05-05
這篇文章主要介紹了純JS實現(xiàn)可用于頁碼更換的飛頁特效,涉及javascript結(jié)合時間函數(shù)的數(shù)學(xué)運(yùn)算與頁面元素屬性動態(tài)修改相關(guān)操作技巧,需要的朋友可以參考下2018-05-05