Actualmente probado: admite IE6+ Firefox, navegador de Google, etc.
Primero echemos un vistazo a los elementos de configuración básicos de este componente: de la siguiente manera:
Copie el código de código de la siguiente manera:
this.config = {
targetCls: '.clickElem', // Haga clic en el elemento
título: 'Soy Long En', // título de la ventana
contenido: 'texto:<p>Soy un dragón</p>',
//contenido: 'img:http://www.baidu.com/a.jpg',
// Contenido de la ventana {texto: contenido específico | id: nombre de id | img: enlace de imagen |
// iframe: enlace src} {cadena}
ancho: 400, // ancho del contenido
altura: 300, //Altura del contenido
altura: 30, // La altura predeterminada del título es 30
arrastrar: verdadero, // Si se puede arrastrar de forma predeterminada es verdadero
time: 3000, // Si el tiempo para cerrar automáticamente la ventana está vacío o 'indefinido', no se cerrará.
showBg: true, // Establece si se muestra la capa de máscara. El valor predeterminado es máscara verdadera.
cerrable: '#ventana-cerrar', // botón cerrar
bgColor: '#000', //Color predeterminado
opacidad: 0.5,//Transparencia predeterminada
posición : {
x: 0,
y: 0 //El valor predeterminado es igual a 0, centrado
},
Índice z: 10000,
isScroll: true, //De forma predeterminada, la ventana se desplaza a medida que se desplaza
isResize: true, // Escala con escala de ventana de forma predeterminada
devolución de llamada: nulo // Función de devolución de llamada después de que se muestra la ventana emergente
};
Escriba un complemento emergente simple en JS (incluida la demostración y el código fuente)
2013-12-11 22:30 por Long En0707, 409 lecturas, 1 comentario, colección, editar
No he terminado muchos proyectos recientemente y hoy estaba tomando un descanso, así que me tomé este tiempo para estudiar la función emergente JS simple. Por supuesto, hay muchos complementos en línea, y lo hice. No miré detenidamente el código fuente de los complementos en línea. Simplemente confié en ellos. Los complementos emergentes que uso todos los días tienen muchas funciones para realizar mis propias ideas emergentes. Es posible que haya logrado las funciones básicas, así que si quiero hacerlo mejor y más completo, ¡debo continuar optimizándolo en el futuro! ¡Si hay alguna deficiencia! ¡Por favor, perdóname!
Como todo el mundo sabe cómo se ve la ventana emergente, ¡esta vez no hice una representación de demostración! Actualmente probado: admite IE6+ Firefox, navegador de Google, etc.
Primero echemos un vistazo a los elementos de configuración básicos de este componente: de la siguiente manera:
Presione Ctrl+C para copiar el código.
Presione Ctrl+C para copiar el código.
1. Admite la configuración del contenido del título, la altura del título, el ancho y la altura del contenido, si la ventana se puede cerrar automáticamente después de arrastrar la ventana emergente, si se muestra la configuración del color de fondo de la máscara y la transparencia, y la posición de visualización de la ventana Los ejes x 0 y 0 predeterminados son Para la alineación central, también puede configurar la posición de los ejes x e y usted mismo, pero tenga en cuenta que el eje X y. El eje y es relativo al elemento principal. Si no se especifica la posición relativa del elemento principal, será relativa al documento de forma predeterminada. Por supuesto, no se recomienda que el ancho y el alto del contenido de la ventana excedan el ancho y el alto de una pantalla del navegador. Intente ser más pequeño que el ancho y el alto de la primera pantalla. complementos en el pasado, existiría después de hacer clic en el botón cerrar porque el navegador tiene una barra de desplazamiento. Después de activar el evento de la barra de desplazamiento, la ventana no se puede cerrar si el ancho y el alto del contenido son grandes, no importa. La ventana tendrá automáticamente barras de desplazamiento.
2. El elemento de configuración del contenido de la ventana admite cuatro tipos de 1. texto (el texto se puede configurar de la siguiente manera: <p>I am Long En</p>).
2. img (imagen) Puede configurar img de la siguiente manera: http://www.baidu.com/a.jpg
3. id (nodo de identificación) se puede configurar de la siguiente manera 'id:XX'
4. El iframe se puede configurar de la siguiente manera: 'iframe:http://www.baidu.com (dirección de iframe)'
3. Proporcione una función de devolución de llamada después de la ventana emergente: por ejemplo, puede hacer lo que quiera después de la ventana emergente.
Por lo tanto, no hay nada que decir sobre el componente de la ventana emergente. Por supuesto, si desea utilizar el estilo CSS en su propio proyecto, puede reescribirlo usted mismo. No he escrito el JS hasta el final, solo he completado lo básico. Funciones comerciales de ventana emergente de JS.
El código HTML es el siguiente:
Copie el código de código de la siguiente manera:
<div style="margin-top:10px;">Soy Long En, haz clic en mí</div>
<div style="margin-top:10px;">Soy Long En, haz clic en mí</div>
El código CSS es el siguiente
Copie el código de código de la siguiente manera:
<tipo de estilo="texto/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{frontera:0;}
cuerpo{font:12px/180% Arial, Helvética, sans-serif;}
etiqueta{cursor:puntero;}
#window-box{borde:5px sólido #E9F3FD;fondo:#FFF;}
.título de la ventana{posición:relativa;altura:30px;borde:1px sólido #A6C9E1;desbordamiento:oculto;fondo:url(images/tipbg.png) 0 0 repetir-x;}
.título de ventana h2{padding-left:5px;font-size:14px;color:#666;}
#ventana-cerrar{posición:absoluta;derecha:10px;arriba:8px;ancho:10px;alto:16px;sangría de texto:-10em;desbordamiento:oculto;fondo:url(images/tipbg.png) 100% -49px sin repetición;cursor:puntero;}
#window-content-border{padding:5px 0 5px 5px;}
</estilo>
El código JS es el siguiente
Copie el código de código de la siguiente manera:
/**
* Escribir componente emergente JS
* @fecha 2013-12-10
*@autor tugenhua
*@correo electrónico [email protected]
*/
función Superposición(opciones){
this.config = {
targetCls: '.clickElem', // Haga clic en el elemento
título: 'Soy Long En', // título de la ventana
contenido: 'texto:<p>Soy Long En</p>',
//contenido: 'img:http://gtms01.alicdn.com/tps/i1/T1USkqFc0dXXb5rXb6-1060-300.jpg',
// Contenido de la ventana {texto: contenido específico | id: nombre de id | img: enlace de imagen |
// iframe: enlace src} {cadena}
ancho: 400, // ancho del contenido
altura: 300, //Altura del contenido
altura: 30, // La altura predeterminada del título es 30
arrastrar: verdadero, // Si se puede arrastrar de forma predeterminada es verdadero
time: 3000, // Si el tiempo para cerrar automáticamente la ventana está vacío o 'indefinido', no se cerrará.
showBg: true, // Establece si se muestra la capa de máscara. El valor predeterminado es máscara verdadera.
cerrable: '#ventana-cerrar', // botón cerrar
bgColor: '#000', //Color predeterminado
opacidad: 0.5,//Transparencia predeterminada
posición : {
x: 0,
y: 0 //El valor predeterminado es igual a 0, centrado
},
Índice z: 10000,
isScroll: true, //De forma predeterminada, la ventana se desplaza a medida que se desplaza
isResize: true, // Escala con escala de ventana de forma predeterminada
devolución de llamada: nulo // Función de devolución de llamada después de que se muestra la ventana emergente
};
este.caché = {
isrender: true, // La estructura HTML emergente solo se representa una vez
isshow: false, // Si se ha mostrado la ventana
movible: falso
};
this.init(opciones);
}
Superposición.prototipo = {
constructor: superposición,
inicio: función(opciones){
this.config = $.extend(this.config,opciones || {});
var yo = esto,
_config = self.config,
_cache = self.cache;
$(_config.targetCls).cada(función(índice,elemento){
$(elemento).unbind('hacer clic');
$(elemento).bind('clic',función(){
// Representa la estructura HTML emergente
self._renderHTML();
// movimiento de ventana
self._windowMove();
});
});
// zoom de ventana
self._windowResize('#ventana-box');
// La ventana se desplaza con la barra de desplazamiento
self._windowIsScroll('#window-box');
},
/*
* Renderizar estructura HTML emergente
*/
_renderHTML: función(){
var yo = esto,
_config = self.config,
_cache = self.cache;
varhtml='';
si(_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">Cerrar</span></div>'+
'<div id="ventana-content-border"><div id="ventana-content"></div></div>' +
'</div>';
$('cuerpo').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({'altura':_config.theight + 'px','ancho':_config.width,'overflow':'hidden'});
_cache.isrender = falso;
// Determinar el formato del contenido pasado
self._contentType();
si(_config.showBg) {
// Renderizar ancho y alto del fondo
self._renderDocHeight();
$("#windowbg").show();
self.mostrar();
}demás {
$("#windowbg").hide();
self.mostrar();
}
self._showDialogPosition("#window-box");
}demás {
// Si la ventana emergente se ha creado y simplemente está oculta, la mostramos
self.mostrar();
$("#windowbg").animate({"opacity":_config.opacity},'normal');
si(_config.showBg) {
$("#windowbg").show();
}
self._showDialogPosition("#window-box");
}
$(_config.closable).unbind('hacer clic');
$(_config.closable).bind('hacer clic',función(){
//Haga clic en el botón cerrar
self._closed();
});
// Función de devolución de llamada después de renderizar
_config.callback && $.isFunction(_config.callback) && _config.callback();
},
/**
* Mostrar ventana emergente
*/
mostrar: función(){
var yo = esto,
_config = self.config,
_cache = self.cache;
$("#ventana-box") && $("#ventana-box").show();
_cache.isshow = verdadero;
if(_config.time == '' || tipo de _config.time == 'indefinido') {
devolver;
}demás {
t && clearTimeout(t);
var t = setTimeout(función(){
self._closed();
},_config.time);
}
},
/**
* Ocultar ventana emergente
*/
ocultar: función(){
var yo = esto,
_cache = self.cache;
$("#ventana-box") && $("#ventana-box").hide();
_cache.isshow = falso;
},
/**
* Determinar el tipo de contenido pasado.
*/
_contentType: función(){
var yo = esto,
_config = self.config,
_cache = self.cache;
var contentType = _config.content.substring(0,_config.content.indexOf(":")),
contenido = _config.content.substring(_config.content.indexOf(":")+1,_config.content.length);
cambiar(tipo de contenido) {
caso 'texto':
$('#ventana-contenido').html(contenido);
romper;
caso 'identificación':
$('#window-content').html($('#'+content).html());
romper;
caso 'img':
$('#window-content').html("<img src='"+content+"' class='window-img'/>");
romper;
caso 'iframe':
$('#window-content').html('<iframe src="'+content+'" scrolling="yes" frameborder="0"></iframe>');
$("#window-content-border").css({'overflow':'visible'});
romper;
}
},
/**
* Haga clic en el botón cerrar
*/
_cerrado: función(){
var yo = esto,
_config = self.config,
_cache = self.cache;
si(_cache.isshow) {
self.ocultar();
}
si(_config.showBg) {
$("#windowbg").hide();
}
$("#windowbg").animate({"opacidad":0},'normal');
},
/**
* La posición donde se muestra la ventana emergente está centrada por defecto
*/
_showDialogPosition: función (contenedor) {
var yo = esto,
_config = self.config,
_cache = self.cache;
$(contenedor).css({'posición':'absoluta','índice z':_config.zIndex + 1});
var offsetTop = Math.floor(($(ventana).height() - $(contenedor).height())/2) + $(document).scrollTop(),
offsetLeft = Math.floor(($(ventana).width() - $(contenedor).width())/2) + $(documento).scrollLeft();
// Determine si la posición x, y es igual a 0 de forma predeterminada. Si es así, céntrela; de lo contrario, reposicione según la posición pasada.
si(0 === _config.position.x && 0 === _config.position.y){
$(contenedor).offset({'top':offsetTop, 'left':offsetLeft});
}demás{
$(contenedor).offset({'top':_config.position.y,'left':_config.position.x});
}
},
/**
* Renderizar la altura del fondo inferior.
*/
_renderDocHeight: función(){
var yo = esto,
_config = self.config;
$("#windowbg").animate({"opacity":_config.opacity},'normal');
si(self._isIE6()){
$("#windowbg").css({'fondo':'#fff','altura':$(documento).altura()+'px','ancho':$(documento).ancho()+ "px"});
}demás {
$("#windowbg").css({'fondo':_config.bgColor,'altura':$(documento).altura()+'px','ancho':$(documento).width()+" píxeles"});
}
},
/*
* Zoom de ventana
*/
_windowResize: función(elem){
var yo = esto,
_config = self.config;
$(ventana).unbind('redimensionar');
$(ventana).bind('redimensionar',función(){
t && clearTimeout(t);
var t = setTimeout(función(){
si(_config.isResize){
self._showDialogPosition(elem);
self._renderDocHeight();
}
},200);
});
},
/**
* Si la ventana se desplaza con la barra de desplazamiento
*/
_windowIsScroll: función(elem){
var yo = esto,
_config = self.config;
$(ventana).unbind('desplazamiento');
$(ventana).bind('desplazamiento',función(){
t && clearTimeout(t);
var t = setTimeout(función(){
si(_config.isScroll){
self._showDialogPosition(elem);
self._renderDocHeight();
}
},200);
});
},
/**
* Movimiento de ventana
*/
_windowMove: función(){
var yo = esto,
_config = self.config,
_cache = self.cache;
var ratónX = 0,
ratónY = 0;
$('.título de la ventana').mouseenter(función(){
$(this).css({'cursor':'move'});
});
$('.título de la ventana').mouseleave(function(){
$(this).css({'cursor':'default'});
});
$('.título de la ventana').mousedown(función(e){
_cache.moveable = verdadero;
mouseX = e.clientX - $(this).offset().left;
mouseY = e.clientY - $(this).offset().top;
$('.window-title').css({'cursor':'move'});
});
$(documento).mouseup(función(){
si(!_cache.moveable) {
devolver;
}
$('.window-title').css({'cursor':'default'});
_cache.moveable = falso;
});
$('#ventana-box').mousemove(función(e){
si(_cache.moveable) {
$(this).css({'left':e.clientX - mouseX + 'px','top':e.clientY - mouseY + 'px'});
}
});
},
/*
* Determinar si es un navegador IE6
* @return {booleano}
*/
_isIE6: función(){
return navigator.userAgent.match(/MSIE 6.0/)!= nulo;
}
};