현재 테스트됨: IE6+ Firefox, Google 브라우저 등을 지원합니다.
먼저 이 구성 요소의 기본 구성 항목을 살펴보겠습니다.
다음과 같이 코드 코드를 복사합니다.
this.config = {
targetCls : '.clickElem', // 요소 클릭
title: '나는 Long En', // 창 제목
content: 'text:<p>나는 용입니다</p>',
//내용: 'img:http://www.baidu.com/a.jpg',
// 창 내용 {text: 특정 내용 | id: id 이름 | 이미지 링크 |
// iframe:src 링크} {string}
width: 400, // 콘텐츠 너비
height : 300, //콘텐츠 높이
height : 30, // 제목의 기본 높이는 30입니다.
drag : true, // 기본적으로 드래그 가능 여부는 true입니다.
time: 3000, // 자동으로 창을 닫는 시간이 비어 있거나 '정의되지 않음'이면 닫히지 않습니다.
showBg: true, // 마스크 레이어 표시 여부를 설정합니다. 기본값은 true 마스크입니다.
closable : '#window-close', // 닫기 버튼
bgColor : '#000', //기본 색상
불투명도: 0.5,//기본 투명도
위치 : {
x: 0,
y: 0 //기본값은 0과 동일하며 중앙에 위치합니다.
},
z인덱스: 10000,
isScroll: true, //기본적으로 창은 스크롤할 때 스크롤됩니다.
isResize : true, // 기본적으로 창 크기 조정에 따라 크기 조정
callback: null//팝업창 표시 후 콜백 함수
};
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축은 y축은 상위 요소를 기준으로 합니다. 상위 요소의 상대적 위치가 지정되지 않으면 기본적으로 문서를 기준으로 합니다. 물론, 창 내용의 너비와 높이가 브라우저의 한 화면의 너비와 높이를 초과하는 것은 권장하지 않습니다. 다른 사람의 팝업을 사용했기 때문입니다. 이전 플러그인에서는 브라우저에 스크롤 막대가 있기 때문에 닫기 버튼을 클릭하면 존재했습니다. 스크롤 막대 이벤트가 발생한 후에는 콘텐츠 너비와 높이가 크면 문제가 되지 않습니다. . 창에 자동으로 스크롤 막대가 표시됩니다.
2. 창의 콘텐츠 구성 항목은 1. 텍스트(text) 4가지 유형을 지원합니다. <p>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를 작성하지 않고 기본만 완료하면 됩니다. JS의 팝업창 비즈니스 기능입니다.
HTML 코드는 다음과 같습니다.
다음과 같이 코드 코드를 복사합니다.
<div style="margin-top:10px;">저는 Long En입니다. 클릭해주세요</div>
<div style="margin-top:10px;">저는 Long En입니다. 클릭해주세요</div>
CSS 코드는 다음과 같습니다
다음과 같이 코드 코드를 복사합니다.
<스타일 유형="텍스트/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{경계:0;}
본문{글꼴:12px/180% Arial, Helvetica, sans-serif;}
라벨{커서:포인터;}
#창 상자{테두리:5px 단색 #E9F3FD;배경:#FFF;}
.window-title{position:relative;height:30px;border:1px solid #A6C9E1;overflow:hidden; background:url(images/tipbg.png) 0 0 반복-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 반복 없음;커서:포인터;}
#window-content-border{패딩:5px 0 5px 5px;}
</style>
JS 코드는 다음과 같습니다
다음과 같이 코드 코드를 복사합니다.
/**
*JS 팝업창 컴포넌트 작성
* @날짜 2013-12-10
* @작가 투겐화
* @이메일 [email protected]
*/
함수 오버레이(옵션){
this.config = {
targetCls : '.clickElem', // 요소 클릭
title: '나는 Long En', // 창 제목
content: 'text:<p>나는 Long En입니다</p>',
//내용: 'img:http://gtms01.alicdn.com/tps/i1/T1USkqFc0dXXb5rXb6-1060-300.jpg',
// 창 내용 {text: 특정 내용 | id: id 이름 | 이미지 링크 |
// iframe:src 링크} {string}
width: 400, // 콘텐츠 너비
height : 300, //콘텐츠 높이
height : 30, // 제목의 기본 높이는 30입니다.
drag : true, // 기본적으로 드래그 가능 여부는 true입니다.
time: 3000, // 자동으로 창을 닫는 시간이 비어 있거나 '정의되지 않음'이면 닫히지 않습니다.
showBg: true, // 마스크 레이어 표시 여부를 설정합니다. 기본값은 true 마스크입니다.
closable : '#window-close', // 닫기 버튼
bgColor : '#000', //기본 색상
불투명도: 0.5,//기본 투명도
위치 : {
x: 0,
y: 0 //기본값은 0과 동일하며 중앙에 위치합니다.
},
z인덱스: 10000,
isScroll: true, //기본적으로 창은 스크롤할 때 스크롤됩니다.
isResize : true, // 기본적으로 창 크기 조정에 따라 크기 조정
callback: null//팝업창 표시 후 콜백 함수
};
this.cache = {
isrender: true, // 팝업 HTML 구조는 한 번만 렌더링됩니다.
isshow: false, // 창이 표시되었는지 여부
이동식 : 거짓
};
this.init(옵션);
}
Overlay.prototype = {
생성자: 오버레이,
초기화: 함수(옵션){
this.config = $.extend(this.config,options || {});
var 자기 = 이것,
_config = self.config,
_cache = self.cache;
$(_config.targetCls).each(함수(색인,항목){
$(item).unbind('클릭');
$(item).bind('클릭',function(){
// 팝업 HTML 구조 렌더링
self._renderHTML();
// 창 이동
self._windowMove();
});
});
// 창 확대/축소
self._windowResize('#window-box');
// 스크롤 막대를 사용하여 창이 스크롤됩니다.
self._windowIsScroll('#window-box');
},
/*
* 팝업 HTML 구조 렌더링
*/
_renderHTML: 함수(){
var 자기 = 이것,
_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><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 = 거짓;
// 전달된 콘텐츠의 형식을 결정합니다.
self._contentType();
if(_config.showBg) {
// 배경 너비와 높이 렌더링
self._renderDocHeight();
$("#windowbg").show();
self.show();
}또 다른 {
$("#windowbg").hide();
self.show();
}
self._showDialogPosition("#window-box");
}또 다른 {
// 팝업창이 생성되어 숨겨져 있으면 표시합니다.
self.show();
$("#windowbg").animate({"opacity":_config.opacity},'normal');
if(_config.showBg) {
$("#windowbg").show();
}
self._showDialogPosition("#window-box");
}
$(_config.closable).unbind('클릭');
$(_config.closable).bind('클릭',함수(){
// 닫기 버튼 클릭
self._closed();
});
// 렌더링 후 콜백 함수
_config.callback && $.isFunction(_config.callback) && _config.callback();
},
/**
* 팝업창 표시
*/
표시: 함수(){
var 자기 = 이것,
_config = self.config,
_cache = self.cache;
$("#window-box") && $("#window-box").show();
_cache.isshow = 사실;
if(_config.time == '' || typeof _config.time == '정의되지 않음') {
반품;
}또 다른 {
t && 클리어타임아웃(t);
var t = setTimeout(함수(){
self._closed();
},_config.time);
}
},
/**
* 팝업창 숨기기
*/
숨기기: 함수(){
var 자기 = 이것,
_cache = self.cache;
$("#window-box") && $("#window-box").hide();
_cache.isshow = 거짓;
},
/**
* 전달된 콘텐츠 유형 결정
*/
_contentType: 함수(){
var 자기 = 이것,
_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);
스위치(콘텐츠 유형) {
사례 '텍스트':
$('#window-content').html(content);
부서지다;
사례 'id':
$('#window-content').html($('#'+content).html());
부서지다;
사례 'img':
$('#window-content').html("<img src='"+content+"' class='window-img'/>");
부서지다;
'iframe'의 경우:
$('#window-content').html('<iframe src="'+content+'" scrolling="yes"frameborder="0"></iframe>');
$("#window-content-border").css({'overflow':'visible'});
부서지다;
}
},
/**
* 닫기 버튼을 클릭하세요
*/
_closed: 함수(){
var 자기 = 이것,
_config = self.config,
_cache = self.cache;
if(_cache.isshow) {
self.hide();
}
if(_config.showBg) {
$("#windowbg").hide();
}
$("#windowbg").animate({"opacity":0},'normal');
},
/**
* 팝업창이 표시되는 위치는 기본적으로 중앙에 위치합니다.
*/
_showDialogPosition: 함수(컨테이너) {
var 자기 = 이것,
_config = self.config,
_cache = self.cache;
$(컨테이너).css({'위치':'절대','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){
$(컨테이너).offset({'top':offsetTop, 'left':offsetLeft});
}또 다른{
$(컨테이너).offset({'top':_config.position.y,'left':_config.position.x});
}
},
/**
* 하단 배경의 높이 렌더링
*/
_renderDocHeight: 함수(){
var 자기 = 이것,
_config = self.config;
$("#windowbg").animate({"opacity":_config.opacity},'normal');
if(self._isIE6()){
$("#windowbg").css({'배경':'#fff','높이':$(document).height()+'px','width':$(document).width()+ "px"});
}또 다른 {
$("#windowbg").css({'배경':_config.bgColor,'height':$(document).height()+'px','width':$(document).width()+" px"});
}
},
/*
* 창 확대
*/
_windowResize: 함수(elem){
var 자기 = 이것,
_config = self.config;
$(window).unbind('크기 조정');
$(창).bind('크기 조정',함수(){
t && 클리어타임아웃(t);
var t = setTimeout(함수(){
if(_config.isResize){
self._showDialogPosition(elem);
self._renderDocHeight();
}
},200);
});
},
/**
* 스크롤 막대를 사용하여 창이 스크롤되는지 여부
*/
_windowIsScroll: 함수(요소){
var 자기 = 이것,
_config = self.config;
$(window).unbind('스크롤');
$(window).bind('스크롤',function(){
t && 클리어타임아웃(t);
var t = setTimeout(함수(){
if(_config.isScroll){
self._showDialogPosition(elem);
self._renderDocHeight();
}
},200);
});
},
/**
* 창 이동
*/
_windowMove: 함수(){
var 자기 = 이것,
_config = self.config,
_cache = self.cache;
var 마우스X = 0,
마우스Y = 0;
$('.window-title').mouseenter(function(){
$(this).css({'cursor':'move'});
});
$('.window-title').mouseleave(function(){
$(this).css({'cursor':'default'});
});
$('.window-title').mousedown(function(e){
_cache.moveable = 사실;
mouseX = e.clientX - $(this).offset().left;
mouseY = e.clientY - $(this).offset().top;
$('.window-title').css({'cursor':'move'});
});
$(문서).mouseup(함수(){
if(!_cache.moveable) {
반품;
}
$('.window-title').css({'cursor':'default'});
_cache.moveable = 거짓;
});
$('#window-box').mousemove(function(e){
if(_cache.moveable) {
$(this).css({'left':e.clientX - mouseX + 'px','top':e.clientY - mouseY + 'px'});
}
});
},
/*
* IE6 브라우저인지 확인
* @return {부울}
*/
_isIE6: 함수(){
return navigator.userAgent.match(/MSIE 6.0/)!= null;
}
};