js實現彈窗外掛程式功能執行個體代碼分享

js實現彈窗外掛程式功能執行個體代碼分享

 這篇文章主要介紹了

目前測試下：支援IE6+ Firefox Google遊覽器等。

 

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

 

代碼如下:

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+ Firefox Google遊覽器等。

 

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

 

按 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 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:  '我是龍恩',      // 視窗標題

 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;

     }

 

 };