Código fuente del anuncio de la capa emergente

De hecho, existen muchos códigos de este tipo en Internet, pero todos tienen inconvenientes. El principio es muy simple: simplemente muestre la capa oculta y controle el índice z. Pero este control no es suficiente para controlar la altura de 100, el estilo no es hermoso y no admite arrastre.

Tengo un código aquí, puedes estudiarlo.

lt script gt

Vardragdrop = función(área de arrastre, área de movimiento){//Arrastrar.

este. área de arrastre = área de arrastre;

este área de movimiento = área de movimiento

this.xdom = null

esto. .mask = null//Bloquear iframe

this x = 0;

this y = 0

this dbsw = top. ancho;

este .dbsh = superior documento .

arrastrar. .prototype = {

GetPosition: function(){//Obtener las coordenadas del elemento. Por ejemplo, si el elemento o su elemento principal tiene una posición relativa establecida, debería ser getpos (elemento secundario). y-getpos (elemento padre).

y.

documento de retorno. getboundingclientrect amp; función amp (o) {//IE, FF, Opera

var pos = o.getBoundingClientRect(), root = o. documento del propietario | o . documento;

Regresar { x：pos >} || Safari, Chrome, Netscape, Mozilla

var x = 0 , y = 0;

hacer { x = o . desplazamiento hacia la izquierda; y = o . desplazamiento superior;} while((o = o . desplazamiento padre));

return {' x':x,'y':y};

};

}(),

setPos: función(obj, x, y){

estilo obj .izquierda = x " px ";

estilo obj . p>mDown: función (e){

var isWK =(/ apple WebKit/I . test(navigator . appversion . replace(/\ s/g,' ')));

var pos = this . obtener posición (this . mover área);

this.x = (isWK)? e . offsetx: (e . clientx-pos . x);

this.y = (isWK)? e . offsety: (e . clienty-pos . y);

pos = null

if(this . drag area . set capture){ this . ); else { e .prevenir default();

this .style .left = this . estilo de máscara. arriba = esto. xdom. nodo principal. desplazamiento hacia arriba 'px';

este estilo. mmove . bind(esto);

},

mMove: Función ){

este .

área .cursor = " mover ";

e = e | evento

var MX =(e . clientx-this . x);

var my =(e . clienty-this . y);

var rx = this . offsetwidth-this . offsetwidth;

var ry = this . . altura de desplazamiento: esta área de movimiento. altura de desplazamiento;

MX =(MX lt;=0)?0: (MX gt;=rx)? rx:mx;

mi =(mi lt;=0)?0: (mi gt=ry)? ry: mío;

this.setPos(this.moveArea, mx, my

},

mUp: función (e) {

este . área de arrastre .cursor = " predeterminado ";

e = event.

var MX =(e . clientx-this . x | );

var my =(e . clienty-this . y);

var rx = this . offsetwidth-this movearea;

var ry = esto. rx:mx;

mi =(mi lt;=0)?0: (mi gt=ry)? ry: mío;

this.setPos(this.moveArea,mx,my);

if(this . drag area . soltar captura){ this . ); }

esta. estilo. display = 'ninguna';

esta. ){

función. prototipo. vincular = función(obj){

var propietario = esto, args = matriz prototipo. prototipo . call(args);

Función de retorno (e){ e = e |

vent | = (/(?：Microsoft|opera)/I . test(navigator . appname));

var xDom =(ventana . top . documento == documento)? documento: (ventana . arriba . documento . cuerpo . nombre de etiqueta! = 'CUERPO ')? Documento: ventana . arriba . documento;

este xdom =(ventana . arriba . documento == documento)? documento CUERPO: (ventana. arriba. documento. CUERPO. nombre de etiqueta == 'CUERPO')? ventana.top.document.body: (ieop)? documento .cuerpo: ventana .documento .elemento del documento;

var xdoc = xdom .createdocumentfragment();

this . /p>

este.estilo.CSS texto = 'visualización: ninguna; posición: absoluta; arriba: 0; ancho: 110; moz-opacidad: 0; opacidad: 0; filtro: alfa (opacidad = 0); índice z: 9999;

xdoc.appendchild(this.mask);

esto. xdom. appendchild(xdoc);

xDom = xdoc = null

este área de movimiento = "absoluta";

. mover área. zindex = 10000;

esta.arrastrar área.

. /p>

Var consejos de máscara = función (ancho, alto) {//Cuadro de solicitud de máscara.

este.ancho = ancho | 500

este.alto = alto 400

este.xdom = nulo

esto .mask = null

this.ifr = null

this.layer = null

this.title = null

this.content = null

this.isOpen = false

this .init();

};

maskTips.prototype = { p>

getStyle: function(dom, stylename){

if(dom.currentStyle){

Devuelve DOM estilo actual[nombre de estilo];

} En caso contrario {

Devolver window.getComputedStyle(dom, null).

getPropertyValue(nombre del estilo);

}

},

Abrir: función (ancho, alto) {

var xdom = this .xdom .elemento de documento; xelm = this .xdom cuerpo; ancho = ancho | alto | este.altura = 'xdom'; ';

xelm . ancho = ' 100 '; oculto ';

este estilo . p>este.estilo IFR.top = xdom.

este estilo. left = xdom . desplazarse hacia la izquierda ' px ';

este estilo de máscara . ';

este contenido. ancho = ancho-10 'px';

este contenido.

var left = xdom . desplazarse hacia la izquierda xdom . offsetwidth/2-(width/ 2) ' px ';

var top = xdom desplazarse hacia arriba esta máscara. /1.8) 'px';

este estilo de capa. ancho = ancho 'px';

este estilo de capa. >

este estilo de capa. izquierda = izquierda;

este estilo de capa.

this.isOpen = true

},

ocultar: función(){

este estilo de capa. none ';

este estilo .

splay = ' none ';

este .estilo IFR .display = 'ninguno';

var xdom = this .xdom .

estilo xdom = 'auto'; estilo xdom = 'auto'; estilo . altura = ' auto '; p>init: function(){

var CSS máscara = ' visualización: ninguna; posición: izquierda: 0; ancho: 110; 110; desbordamiento: oculto; fondo: #000; -moz-opacidad: 0,6; filtro: alfa (opacidad = 60); var cssIfr = 'pantalla: ninguna; posición: absoluta; fondo: #fff-moz-opacidad: 0; (opacidad = 0); índice z: 100; borde: ninguno; '; var CSS capa = ' mostrar: ninguno; posición: izquierda: 0; .width " px; altura: 'this.height' px; desbordamiento: oculto; escala: 1; fondo: blanco; borde: 5px sólido # índice dddz: 102; relleno: 0; ';

var ieop = ( /(?：Microsoft | opera)/I . test(navigator . appname));

var xDom = (ventana . top . documento == documento)? documento: (ventana . arriba . documento . cuerpo . nombre de etiqueta! = 'CUERPO ')? Documento: ventana . arriba . documento;

var xElm =(ventana . arriba . documento == documento)? documento CUERPO: (ventana. arriba. documento. CUERPO. nombre de etiqueta == 'CUERPO')? ventana.top.document.body: (ieop)? documento .cuerpo: ventana .arriba .documento .elemento del documento;

this.xdom = xDom

var xdoc = xdom . máscara = xdom . createelement(' div ');

esto.

IFR = xdom . createelement(' iframe ');

this . p>

p>

xdoc . appendchild(esta . máscara);

xdoc . appendchild(esta . capa);

esta capa . ; estilo div = " altura: 30px; fondo: #ddd alineación del texto: derecha; desbordamiento: oculto; escala: 1; " gt ltH3 estilo = " flotante: izquierda; margen: 0; relleno: 0; tamaño de fuente: 12px; " gt upload Por favor, haga clic en el botón cerrar

este . máscara . estilo . CSS texto = máscara CSS;

este . IFR . estilo . CSS texto = CSS IFR;

este .estilo de capa .texto CSS = capa CSS;

este título . nodos secundarios[0];

este. contenido = esta. capa. nodos secundarios[1];

nuevo dragDrop(esta. capa. nodos secundarios[0], esta. capa );

esta capa. getelementsbytagname('botón')[0]. onclick =(función(o){ función de retorno(){ o . hide()} })(esto);

ventana settimeout(función(){ xelm . appendchild(xdoc)); xElm = xdoc = null});

}

};

var x = nueva máscara(300, 200); Función openDiv(){

x.open(750, 700);

750 ancho, 700 alto

}

lt/ script gt;

Método de gradiente: openDiv()

Como