팝업 플러그인 기능 예제 코드의 Node.js 구현 Sharing

현재 테스트 완료: IE6, Firefox, Google 브라우저 등을 지원합니다.

먼저 이 컴포넌트의 기본 구성 항목을 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

this.config = {

targetCls : '.clickElem', // 요소 클릭
title: 'I am Long En', // 창 제목
content : 'text:

나는 용입니다

',
//content : 'img:http://www.baidu.com/a.jpg',
// 창 콘텐츠 {text: 특정 콘텐츠 | id: ID 이름 | img: 이미지 링크 |
// iframe:src link} {string}
너비: 400, // 콘텐츠 너비
높이: 300, // 콘텐츠 높이
height : 30, // 제목의 높이는 기본적으로 30입니다
drag : true, // 드래그 가능 여부는 기본적으로 true
time : 3000, // 자동으로 창이 닫히는 시간은 비어 있음 또는 '정의되지 않음' 닫지 않음
showBg : true, // 기본적으로 마스크 레이어 표시 여부를 설정합니다. Mask
closable : '#window-close', // 닫기 버튼
bgColor : ' #000', // 기본 색상
불투명도 : 0.5, // 기본 투명도
위치 : {
x: 0,
y: 0 //기본값은 0과 동일 중앙
},
zIndex : 10000 ,
isScroll : true, //기본적으로 창 스크롤에 따라 창이 스크롤됩니다.
isResize : true, Function

};

JS로 간단한 팝업 플러그인 작성(데모 및 소스코드 포함)

2013-12-11 22:30 by Long En0707, 읽음 409개, 댓글 1개, 즐겨찾기, 편집
최근 프로젝트는 완료됐지만 상황은 많이 바뀌지 않았습니다. 오늘은 쉬는 시간을 가지게 되어 간단한 JS 팝업창 기능에 대해 공부해 보았습니다. 물론 인터넷에는 많은 플러그인이 있습니다. 인터넷에 있는 플러그인 소스코드를 자세히 살펴보지는 않고 그냥 제가 매일 사용하는 팝업창에만 의존했습니다. 플러그인에는 자신만의 팝업 아이디어를 실현할 수 있는 기능이 너무 많습니다. 기본적인 기능은 구현했을 수도 있으니 더 좋고, 더 완벽하게 만들고 싶다면 앞으로도 계속해서 최적화를 해줘야 할 것 같아요! 단점이 있다면! 용서해주세요!

팝업창이 어떤 모양인지는 다들 아시기 때문에 이번에는 시연 렌더링을 하지 않았습니다! 현재 테스트됨: IE6 Firefox, Google 브라우저 등을 지원합니다.

먼저 이 컴포넌트의 기본 구성 항목을 살펴보겠습니다.

Ctrl C를 눌러 코드를 복사하세요

Ctrl C를 눌러 코드 복사

1. 제목 내용, 제목의 높이, 내용의 너비와 높이, 팝업 창을 드래그한 후 창을 자동으로 닫을 수 있는지 여부를 구성하는 기능을 지원합니다. 마스크 배경색 및 투명도 구성을 표시할지 여부 및 창 구성 표시 위치는 기본적으로 x축 0, y축 0으로 중앙 정렬 및 x축 위치도 구성할 수 있습니다. 축과 y축은 직접 지정할 수 있지만 X축과 y축은 상위 요소를 기준으로 합니다. 상위 요소의 상대 위치를 지정하지 않으면 기본적으로 문서를 기준으로 지정됩니다. 물론, 창 내용의 너비와 높이가 브라우저의 한 화면의 너비와 높이를 초과하는 것은 권장하지 않습니다. 다른 사람의 팝업을 사용했기 때문입니다. 이전 플러그인에서는 브라우저에 스크롤 막대가 있기 때문에 닫기 버튼을 클릭하면 존재했습니다. 스크롤 막대 이벤트가 발생한 후에는 콘텐츠 너비와 높이가 크면 문제가 되지 않습니다. . 창에 자동으로 스크롤 막대가 표시됩니다.

2. 창의 콘텐츠 구성 항목은 1. 텍스트(text) 4가지 유형을 지원합니다. 텍스트는 다음과 같이 구성할 수 있습니다:

I am Long En< ;/p>

2. img(사진)는 다음과 같이 구성할 수 있습니다. img: http://www.baidu.com/a.jpg

3. id(id node)는 'id:XX'와 같이 구성 가능합니다

4. iframe은 'iframe:http://www.baidu.com(iframe 주소)'와 같이 구성할 수 있습니다

3. 팝업창 이후 콜백 기능 제공: 팝업창 이후에 원하는 작업을 수행할 수 있습니다.

그래서 팝업 창 구성 요소에 대해서는 말할 것도 없습니다. 물론 자신의 프로젝트에 사용하려면 CSS 스타일을 직접 다시 작성하면 됩니다. JS의 기본 팝업창 비즈니스 기능을 완성합니다.

HTML 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

저는 Long En입니다. 저를 클릭해주세요

저는 롱엔입니다. 클릭해주세요

CSS 코드는 다음과 같습니다

코드 복사 코드는 다음과 같습니다.

JS 코드는 다음과 같습니다

코드 복사 코드는 다음과 같습니다.

/**
* 编写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;
     }

};

팝업 플러그인 기능 예제 코드의 Node.js 구현 Sharing_javascript 기술