js實現彈窗插件功能實例代碼分享

2019-11-20 21:28:57

字體：大中小

來源：轉載

供稿：網友

目前測試下：支持IE6+ 火狐谷歌游覽器等。

先來看看此組件的基本配置項：如下：

this.config = {

targetCls   :   '.clickElem',   // 點擊元素
title: '我是龍恩',      // 窗口標題
content     : 'text:<p style="width:100px;height:100px">我是龍</p>',
//content            : 'img:http://www.baidu.com/a.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//彈窗顯示后回調函數

};

JS編寫簡單的彈窗插件(含有demo和源碼)
2013-12-11 22:30 by 龍恩0707, 409 閱讀, 1 評論, 收藏, 編輯
最近項目做完了事情不是很多，今天正好也在調休，所以趁著這個時間研究了一下簡易的JS彈窗功能，當然網上這塊插件非常多，本人也沒有仔細看網上的插件源碼只是憑著日常使用過的彈窗插件有這么多功能來實現自己的彈窗思路，當然我這個可能實現了基本功能，那么如果想做的更好更完善需要以后繼續優化！如果有不足之處！請大家多多諒解！

由于彈窗大家都知道是個什么樣的所以這次沒有做演示效果圖！目前測試下：支持IE6+ 火狐谷歌游覽器等。

先來看看此組件的基本配置項：如下：

按 Ctrl+C 復制代碼

按 Ctrl+C 復制代碼
1. 支持配置標題內容，標題的高度內容的寬度和高度窗口是否可以拖動彈窗后是否自動關閉是否顯示遮罩背景顏色及透明度的配置，及窗口的展示位置默認x軸0 y軸0是居中對齊，也可以自己配置x軸 y軸的位置但是要注意是相對于父元素那個X軸 y軸如果不指定父元素的相對定位那么默認情況下會相對于document的。當然窗口內容的寬度和高度不建議超過游覽器的一屏幕的寬度和高度盡量小于第一屏的寬度和高度因為我以前用別人的彈窗插件會存在點擊關閉按鈕后由于游覽器有滾動條點擊后觸發滾動條事件導致關閉不了窗口如果內容寬度和高度很大的話也沒有關系窗口自動會出現滾動條的。

2. 窗口的內容配置項支持四種 1.text（文本）可以如下配置 text:<p style="width:100px;height:100px">我是龍恩</p>

2. img（圖片）可以如下配置 img:http://www.baidu.com/a.jpg

3. id（id節點）可以如下配置 'id:XX'

4. iframe 可以如下配置 'iframe:http://www.baidu.com(iframe地址)'

3. 提供彈窗后回調函數：如彈窗后可以做自己想做的事情。

所以彈窗組件也沒有什么好說的當然如果要用到自己的項目中 css樣式可以自己重新寫的，我JS并沒有寫死掉只是完成JS基本彈窗業務功能。

HTML代碼如下：

復制代碼代碼如下:

<div class="clickElem" style="margin-top:10px;">我是龍恩 請點擊我</div>
<div class="clickElem" style="margin-top:10px;">我是龍恩 請點擊我</div>

CSS代碼如下

復制代碼代碼如下:

</style>

JS代碼如下

復制代碼代碼如下:

/**
* 編寫JS彈窗組件
* @date 2013-12-10
* @author tugenhua
* @email [email protected]
*/

function Overlay(options){

this.config = {

targetCls   :   '.clickElem',   // 點擊元素
title: '我是龍恩',      // 窗口標題
content     : 'text:<p style="width:100px;height:100px">我是龍恩</p>',
//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+= '<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">關閉</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;

     // 判斷傳遞進來的內容格式
     self._contentType();
     if(_config.showBg) {
// 渲染背景寬度和高度
self._renderDocHeight();
$("#windowbg").show();

self.show();
     }else {
$("#windowbg").hide();
self.show();
     }
     self._showDialogPosition("#window-box");
}else {

     // 如果彈窗已經創建出來的話, 只是隱藏掉了, 那么我們顯示出來
     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(){
     // 點擊關閉按鈕
     self._closed();
});

// 渲染后回調函數
_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("<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;
}
     },
     /**
      * 點擊關閉按鈕
      */
     _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('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;
     }

};

上一篇：解析頁面加載與js函數的執行 onload or ready

下一篇：深入理解JQuery keyUp和keyDown的區別