js implementation of pop-up plug-in function example code sharing_javascript skills

Currently tested: supports IE6, Firefox, Google browser, etc.

Let’s first take a look at the basic configuration items of this component: as follows:

Copy code The code is as follows:

this.config = {

targetCls : '.clickElem', // Click element
title: 'I am Long En', // Window title
content : 'text:

I am a dragon

',
//content : 'img:http://www.baidu.com/a.jpg',
// window content {text: specific Content | id: id name | img: image link |
// iframe:src link} {string}
width: 400, // Content width
height : 300, // Content height
height : 30, // The height of the title is 30 by default
drag : true, // Whether it can be dragged is by default true
time : 3000, // The time to automatically close the window is empty or 'undefined' Do not close
showBg : true, // Set whether to display the mask layer by default. Mask
closable : '#window-close', // Close button
bgColor : '#000', / / Default color
opacity : 0.5, // Default transparency
position : {
x: 0,
y: 0 //Default equal to 0 Centered
},
zIndex : 10000 ,
isScroll : true, //By default, the window scrolls as the window scrolls
isResize : true, Function
};

Write a simple pop-up plug-in in JS (including demo and source code)

2013-12-11 22:30 by Long En0707, 409 reads, 1 comments, favorites, edits
The recent project has been completed and things have not changed A lot. I happened to be taking a break today, so I took this time to study the simple JS pop-up window function. Of course, there are many plug-ins on the Internet. I didn’t look carefully at the plug-in source code on the Internet. I just relied on the pop-up windows I used daily. The plug-in has so many functions to realize your own pop-up ideas. Of course, I may have achieved the basic functions, so if you want to make it better and more complete, you need to continue to optimize it in the future! If there are any shortcomings! Please forgive me!

Since everyone knows what the pop-up window looks like, I didn’t do a demonstration rendering this time! Currently tested: supports IE6 Firefox, Google browser, etc.

Let’s first take a look at the basic configuration items of this component: as follows:

Press Ctrl C to copy the code

Press Ctrl C to copy the code

1. Support configuring the title content, the height of the title, the width and height of the content, whether the window can be automatically closed after dragging the pop-up window, whether to display the configuration of the mask background color and transparency, and the configuration of the window The display position defaults to x-axis 0 and y-axis 0, which are centered and aligned. You can also configure the position of the x-axis and y-axis yourself, but please note that the X-axis and y-axis are relative to the parent element. If you do not specify the relative positioning of the parent element, then by default it will Relative to document. Of course, it is not recommended that the width and height of the window content exceed the width and height of one screen of the browser. Try to be smaller than the width and height of the first screen. Because I used other people’s pop-up plug-ins in the past, it would exist after clicking the close button because the browser has a scroll bar. After triggering the scroll bar event, the window cannot be closed. If the content width and height are large, it doesn't matter. The window will automatically have scroll bars.

2. The content configuration items of the window support four types of 1. text (text). Text can be configured as follows:

I am Long En

2. img (picture) can be configured as follows img: http://www.baidu.com/a.jpg

3. id (id node) can be configured as follows 'id:XX'

4. iframe can be configured as follows 'iframe:http://www.baidu.com (iframe address)'

3. Provide a callback function after the pop-up window: You can do what you want to do after the pop-up window.

So there is nothing to say about the pop-up window component. Of course, if you want to use it in your own project, you can rewrite the css style yourself. I have not written the JS to death. I just complete the basic pop-up window business functions of JS.

The HTML code is as follows:

Copy code The code is as follows:

I am Long En, please click me

I am Long En, please click me

CSS code is as follows

Copy code The code is as follows:

The JS code is as follows

Copy code The code is as follows:

/**
 * 编写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'});
     _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("");

     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({'배경':'#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(){
 navigator.userAgent를 반환합니다. .match(/MSIE 6.0/)!= null;
     }

 };