현재 테스트 완료: IE6, Firefox, Google 브라우저 등을 지원합니다.
먼저 이 컴포넌트의 기본 구성 항목을 살펴보겠습니다.
targetCls : '.clickElem', // 요소 클릭
title: 'I am Long En', // 창 제목
content : 'text:
나는 용입니다
',2013-12-11 22:30 by Long En0707, 읽음 409개, 댓글 1개, 즐겨찾기, 편집
최근 프로젝트는 완료됐지만 상황은 많이 바뀌지 않았습니다. 오늘은 쉬는 시간을 가지게 되어 간단한 JS 팝업창 기능에 대해 공부해 보았습니다. 물론 인터넷에는 많은 플러그인이 있습니다. 인터넷에 있는 플러그인 소스코드를 자세히 살펴보지는 않고 그냥 제가 매일 사용하는 팝업창에만 의존했습니다. 플러그인에는 자신만의 팝업 아이디어를 실현할 수 있는 기능이 너무 많습니다. 기본적인 기능은 구현했을 수도 있으니 더 좋고, 더 완벽하게 만들고 싶다면 앞으로도 계속해서 최적화를 해줘야 할 것 같아요! 단점이 있다면! 용서해주세요!
먼저 이 컴포넌트의 기본 구성 항목을 살펴보겠습니다.
Ctrl C를 눌러 코드를 복사하세요
Ctrl C를 눌러 코드 복사
1. 제목 내용, 제목의 높이, 내용의 너비와 높이, 팝업 창을 드래그한 후 창을 자동으로 닫을 수 있는지 여부를 구성하는 기능을 지원합니다. 마스크 배경색 및 투명도 구성을 표시할지 여부 및 창 구성 표시 위치는 기본적으로 x축 0, y축 0으로 중앙 정렬 및 x축 위치도 구성할 수 있습니다. 축과 y축은 직접 지정할 수 있지만 X축과 y축은 상위 요소를 기준으로 합니다. 상위 요소의 상대 위치를 지정하지 않으면 기본적으로 문서를 기준으로 지정됩니다. 물론, 창 내용의 너비와 높이가 브라우저의 한 화면의 너비와 높이를 초과하는 것은 권장하지 않습니다. 다른 사람의 팝업을 사용했기 때문입니다. 이전 플러그인에서는 브라우저에 스크롤 막대가 있기 때문에 닫기 버튼을 클릭하면 존재했습니다. 스크롤 막대 이벤트가 발생한 후에는 콘텐츠 너비와 높이가 크면 문제가 되지 않습니다. . 창에 자동으로 스크롤 막대가 표시됩니다.
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 코드는 다음과 같습니다.
CSS 코드는 다음과 같습니다
JS 코드는 다음과 같습니다
function Overlay(options){
this.config = {
targetCls : '.clickElem', // 点击元素
title: '我是龙恩', // 窗口标题
content : 'text:
我是龙恩
',};
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+= '
' + // 渲染后 回调函数
_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 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
