Atualmente testado: suporta IE6+ Firefox, navegador Google, etc.
Vamos primeiro dar uma olhada nos itens básicos de configuração deste componente: como segue:
Copie o código do código da seguinte forma:
isto.config={
targetCls: '.clickElem', // Clique no elemento
título: 'Eu sou Long En', // título da janela
content : 'texto:<p>Eu sou um dragão</p>',
//conteúdo: 'img:http://www.baidu.com/a.jpg',
// Conteúdo da janela {texto: conteúdo específico id: nome do id | img: link da imagem |
// iframe: link src} {string}
largura: 400, // largura do conteúdo
altura: 300, //Altura do conteúdo
height : 30, // A altura padrão do título é 30
drag : true, // Se pode ser arrastado por padrão é verdadeiro
time: 3000, // Se o tempo para fechar automaticamente a janela estiver vazio ou 'indefinido', ela não será fechada.
showBg: true, // Define se a camada de máscara deve ser exibida. O valor padrão é true mask.
closable : '#window-close', // botão fechar
bgColor : '#000', //Cor padrão
opacidade: 0,5, // Transparência padrão
posição: {
x: 0,
y: 0 //O padrão é igual a 0, centralizado
},
zÍndice: 10000,
isScroll: true, //Por padrão, a janela rola conforme rola
isResize : true, // Dimensiona com escala de janela por padrão
callback: null // Função de retorno de chamada após a janela pop-up ser exibida
};
Escreva um plug-in pop-up simples em JS (incluindo demonstração e código-fonte)
11/12/2013 22:30 por Long En0707, 409 leituras, 1 comentário, coleção, editar
Não terminei muitos projetos recentemente e hoje estou fazendo uma pausa, então aproveitei esse tempo para estudar a função simples de pop-up JS. Claro, existem muitos plug-ins online, e não o fiz. Não olhei atentamente para o código-fonte dos plug-ins on-line, apenas confiei neles. Os plug-ins pop-up que uso todos os dias têm muitas funções para realizar minhas próprias ideias pop-up. pode ter alcançado as funções básicas, então se eu quiser torná-lo melhor e mais completo, preciso continuar a otimizá-lo no futuro! Se houver alguma deficiência! Por favor me perdoe!
Como todo mundo sabe como é a janela pop-up, desta vez não fiz uma demonstração de renderização! Atualmente testado: suporta IE6+ Firefox, navegador Google, etc.
Vamos primeiro dar uma olhada nos itens básicos de configuração deste componente: como segue:
Pressione Ctrl+C para copiar o código
Pressione Ctrl+C para copiar o código
1. Suporte para configuração do conteúdo do título, altura do título, largura e altura do conteúdo, se a janela pode ser fechada automaticamente após arrastar a janela pop-up, se deseja exibir a configuração da cor de fundo e transparência da máscara, e a posição de exibição da janela Os eixos x 0 e eixo y 0 padrão são Para alinhamento central, você também pode configurar a posição do eixo xey, mas observe que o eixo X e o eixo y. O eixo y é relativo ao elemento pai. Se o posicionamento relativo do elemento pai não for especificado, ele será relativo ao documento por padrão. Claro, não é recomendado que a largura e a altura do conteúdo da janela excedam a largura e a altura de uma tela do navegador. Tente ser menor que a largura e a altura da primeira tela porque usei o pop-up de outras pessoas. plug-ins no passado, ele existiria após clicar no botão Fechar porque o navegador possui uma barra de rolagem. Depois de acionar o evento da barra de rolagem, a janela não pode ser fechada. Se a largura e a altura do conteúdo forem grandes, não importa. A janela terá automaticamente barras de rolagem.
2. Os itens de configuração de conteúdo da janela suportam quatro tipos de 1. texto (texto). O texto pode ser configurado da seguinte forma: <p>I am Long En</p>.
2. img (imagem) Você pode configurar img da seguinte forma: http://www.baidu.com/a.jpg
3. id (nó de id) pode ser configurado da seguinte forma 'id:XX'
4. O iframe pode ser configurado da seguinte forma 'iframe:http://www.baidu.com (endereço iframe)'
3. Fornece uma função de retorno de chamada após a janela pop-up: Por exemplo, você pode fazer o que deseja após a janela pop-up.
Portanto, não há nada a dizer sobre o componente da janela pop-up. Claro, se você quiser usar o estilo CSS em seu próprio projeto, você mesmo pode reescrevê-lo. Não escrevi o JS até a morte, apenas complete o básico. funções de negócios de janela pop-up de JS.
O código HTML é o seguinte:
Copie o código do código da seguinte forma:
<div style="margin-top:10px;">Eu sou Long En, clique em mim</div>
<div style="margin-top:10px;">Eu sou Long En, clique em mim</div>
O código CSS é o seguinte
Copie o código do código da seguinte forma:
<style type="texto/css">
*{margem:0;padding:0;tipo de estilo de lista:none;}
a,img{borda:0;}
corpo{fonte:12px/180% Arial, Helvetica, sans-serif;}
rótulo{cursor:ponteiro;}
#window-box{borda:5px sólido #E9F3FD;fundo:#FFF;}
.window-title{posição:relativa;altura:30px;borda:1px sólido #A6C9E1;overflow:hidden;background:url(images/tipbg.png) 0 0 repetir-x;}
.window-title h2{padding-left:5px;font-size:14px;color:#666;}
#window-close{posição:absoluta;direita:10px;topo:8px;largura:10px;altura:16px;recuo de texto:-10em;overflow:oculto;fundo:url(images/tipbg.png) 100% -49px sem repetição;cursor:ponteiro;}
#window-content-border{preenchimento:5px 0 5px 5px;}
</estilo>
O código JS é o seguinte
Copie o código do código da seguinte forma:
/**
* Escrever componente de janela pop-up JS
* @data 10/12/2013
* @autor tugenhua
* @e-mail [email protected]
*/
função Sobreposição(opções){
isto.config={
targetCls: '.clickElem', // Clique no elemento
título: 'Eu sou Long En', // título da janela
content : 'texto:<p>Eu sou Long En</p>',
//conteúdo: 'img:http://gtms01.alicdn.com/tps/i1/T1USkqFc0dXXb5rXb6-1060-300.jpg',
// Conteúdo da janela {texto: conteúdo específico id: nome do id | img: link da imagem |
// iframe: link src} {string}
largura: 400, // largura do conteúdo
altura: 300, //Altura do conteúdo
height : 30, // A altura padrão do título é 30
drag : true, // Se pode ser arrastado por padrão é verdadeiro
time: 3000, // Se o tempo para fechar automaticamente a janela estiver vazio ou 'indefinido', ela não será fechada.
showBg: true, // Define se a camada de máscara deve ser exibida. O valor padrão é true mask.
closable : '#window-close', // botão fechar
bgColor : '#000', //Cor padrão
opacidade: 0,5, // Transparência padrão
posição: {
x: 0,
y: 0 //O padrão é igual a 0, centralizado
},
zÍndice: 10000,
isScroll: true, //Por padrão, a janela rola conforme rola
isResize : true, // Dimensiona com escala de janela por padrão
callback: null // Função de retorno de chamada após a janela pop-up ser exibida
};
este.cache = {
isrender: true, // A estrutura HTML pop-up só é renderizada uma vez
isshow: false, // Se a janela foi exibida
móvel: falso
};
this.init(opções);
}
Sobreposição.prototype = {
construtor: Sobreposição,
inicialização: função(opções){
this.config = $.extend(this.config,options || {});
var self = isso,
_config = self.config,
_cache = self.cache;
$(_config.targetCls).each(function(index,item){
$(item).unbind('clique');
$(item).bind('clique',function(){
// Renderiza a estrutura HTML do pop-up
self._renderHTML();
//movimento da janela
self._windowMove();
});
});
//Zoom da janela
self._windowResize('#caixa-janela');
//A janela rola com a barra de rolagem
self._windowIsScroll('#caixa-janela');
},
/*
* Renderizar estrutura HTML pop-up
*/
_renderHTML: função(){
var self = isso,
_config = self.config,
_cache = self.cache;
varhtml='';
if(_cache.isrender) {
html+= '<div id="windowbg" style="display:none;posição:absoluta;topo:0;esquerda:0;"></div>' +
'<div id="window-box" style="display:none;overflow:hidden;">' +
'<div><h2></h2><span id="window-close">Fechar</span></div>'+
'<div id="window-content-border"><div id="window-content"></div></div>' +
'</div>';
$('corpo').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 = falso;
// Determina o formato do conteúdo passado
self._contentType();
if(_config.showBg) {
// Renderiza largura e altura do fundo
self._renderDocHeight();
$("#windowbg").show();
self.show();
}outro {
$("#windowbg").hide();
self.show();
}
self._showDialogPosition("#caixa-janela");
}outro {
// Se a janela pop-up foi criada e está oculta, então a exibimos
self.show();
$("#windowbg").animate({"opacidade":_config.opacity},'normal');
if(_config.showBg) {
$("#windowbg").show();
}
self._showDialogPosition("#caixa-janela");
}
$(_config.closable).unbind('clique');
$(_config.closable).bind('clique',function(){
//Clique no botão fechar
self._closed();
});
//Função de retorno de chamada após renderização
_config.callback && $.isFunction(_config.callback) && _config.callback();
},
/**
* Mostrar janela pop-up
*/
mostrar: função(){
var self = isso,
_config = self.config,
_cache = self.cache;
$("#caixa de janela") && $("#caixa de janela").show();
_cache.isshow = verdadeiro;
if(_config.time == '' || typeof _config.time == 'indefinido') {
retornar;
}outro {
t && clearTimeout(t);
var t = setTimeout(função(){
self._closed();
},_config.time);
}
},
/**
* Ocultar janela pop-up
*/
ocultar: function(){
var self = isso,
_cache = self.cache;
$("#caixa de janela") && $("#caixa de janela").hide();
_cache.isshow = falso;
},
/**
* Determine o tipo de conteúdo transmitido
*/
_contentType: função(){
var self = isso,
_config = self.config,
_cache = self.cache;
var contentType = _config.content.substring(0,_config.content.indexOf(":")),
conteúdo = _config.content.substring(_config.content.indexOf(":")+1,_config.content.length);
switch(contentType) {
caso 'texto':
$('#janela-conteúdo').html(conteúdo);
quebrar;
caso 'id':
$('#window-content').html($('#'+content).html());
quebrar;
caso 'img':
$('#window-content').html("<img src='"+content+"' class='window-img'/>");
quebrar;
caso 'iframe':
$('#window-content').html('<iframe src="'+content+'" scrolling="yes" frameborder="0"></iframe>');
$("#window-content-border").css({'overflow':'visible'});
quebrar;
}
},
/**
* Clique no botão Fechar
*/
_fechado: função(){
var self = isso,
_config = self.config,
_cache = self.cache;
if(_cache.isshow) {
self.ocultar();
}
if(_config.showBg) {
$("#windowbg").hide();
}
$("#windowbg").animate({"opacidade":0},'normal');
},
/**
* A posição onde a janela pop-up é exibida é centralizada por padrão
*/
_showDialogPosition: function(contêiner) {
var self = isso,
_config = self.config,
_cache = self.cache;
$(container).css({'posição':'absoluto','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();
// Determina se a posição x, y é igual a 0 por padrão. Nesse caso, centralize-a, caso contrário, reposicione de acordo com a posição passada.
if(0 === _config.posição.x && 0 === _config.posição.y){
$(container).offset({'top':offsetTop, 'left':offsetLeft});
}outro{
$(container).offset({'top':_config.position.y,'left':_config.position.x});
}
},
/**
* Renderize a altura do fundo inferior
*/
_renderDocHeight: função(){
var self = isso,
_config = self.config;
$("#windowbg").animate({"opacidade":_config.opacity},'normal');
if(self._isIE6()){
$("#windowbg").css({'background':'#fff','height':$(document).height()+'px','width':$(document).width()+ "px"});
}outro {
$("#windowbg").css({'background':_config.bgColor,'height':$(document).height()+'px','width':$(document).width()+" px"});
}
},
/*
* Zoom da janela
*/
_windowResize: função(elem){
var self = isso,
_config = self.config;
$(janela).unbind('redimensionar');
$(janela).bind('redimensionar',function(){
t && clearTimeout(t);
var t = setTimeout(função(){
if(_config.isResize){
self._showDialogPosition(elem);
self._renderDocHeight();
}
},200);
});
},
/**
* Se a janela rola com a barra de rolagem
*/
_windowIsScroll: função(elem){
var self = isso,
_config = self.config;
$(janela).unbind('rolar');
$(janela).bind('scroll',function(){
t && clearTimeout(t);
var t = setTimeout(função(){
if(_config.isScroll){
self._showDialogPosition(elem);
self._renderDocHeight();
}
},200);
});
},
/**
* Movimento da janela
*/
_windowMove: função(){
var self = isso,
_config = self.config,
_cache = self.cache;
var mouseX = 0,
mouseY = 0;
$('.window-title').mouseenter(function(){
$(este).css({'cursor':'mover'});
});
$('.window-title').mouseleave(function(){
$(this).css({'cursor':'default'});
});
$('.window-title').mousedown(function(e){
_cache.moveable = verdadeiro;
mouseX = e.clientX - $(this).offset().left;
mouseY = e.clientY - $(this).offset().top;
$('.window-title').css({'cursor':'mover'});
});
$(documento).mouseup(function(){
if(!_cache.moveable) {
retornar;
}
$('.window-title').css({'cursor':'default'});
_cache.moveable = falso;
});
$('#window-box').mousemove(function(e){
if(_cache.moveable) {
$(this).css({'left':e.clientX - mouseX + 'px','top':e.clientY - mouseY + 'px'});
}
});
},
/*
* Determine se é um navegador IE6
* @return {Booleano}
*/
_isIE6: função(){
retornar navigator.userAgent.match(/MSIE 6.0/)!= null;
}
};