Este artículo describe la implementación del cuadro de solicitud emergente de arrastre por JS+CSS. Compártelo para su referencia. El método de implementación específico es el siguiente:
Copie el código de la siguiente manera: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1 transitional.dtd"> ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> cuadro indicador de aviso creable creado por JS+CSS </title>
<style type = "text/css">
A {color:#000; tamaño de fuente: 12px; decoración de texto: ninguno}
A: Hover {Color:#900; Decoración de texto: subrayado}
Body {Background:; Filter: progid: dximagetransform.microsoft.gradient (GradientType = 0, startColorstr =#ffffff, endcolorstr =#003366); desbordamiento: oculto}
#Massage_Box {posición: Absolute; izquierda: expresión ((body.clientwidth-350)/2); superior: expresión ((body.clientHeight-200)/2); Ancho: 350px; Altura: 200px; Filtro: dropshadow (color =#666666, offx = 3, offy = 3, positivo = 2); índice z: 2; Visibilidad: Hidden}
#mask {posición: absoluto; arriba: 0; Izquierda: 0; Ancho: expresión (cuerpo. Antecedentes:#666; Filtro: alfa (opacidad = 60); índice z: 1; Visibilidad: Hidden}
.massage {border:#036 sólido; ancho de la frontera: 1 1 3 1; Ancho: 95%; Altura: 95%; Antecedentes: #ffff; Color:#036; tamaño de fuente: 12px; Línea de altura: 150%}
.Header {fondo:#036; Altura: 10%; Font-Family: Verdana, Arial, Helvetica, Sans-Serif; tamaño de fuente: 12px; relleno: 3 5 0 5; Color: #fff}
</style>
<!-Implementar el movimiento de la capa->
<script language = "javaScript">
var obj = ''
document.onmouseup = mup
document.onmousemove = mmove
función mdown (objeto) {
Object.id
document.all (obj) .setCapture ()
px = event.x-document.all (obj) .style.pixelleft;
py = event.y-Document.all (obj) .style.pixelTop;
}
función mMove () {
if (obj! = '') {
document.all (obj) .style.left = event.x-px;
document.all (obj) .style.top = event.y-py;
}
}
función mup () {
if (obj! = '') {
document.all (obj) .RelEASECapTure ();
Obj = '';
}
}
</script>
</head> <body>
<div id = "masaje_box"> <div>
<div onmousedown = mdown (masaje_box)>
<span onClick = "masaje_box.style.visibility = 'Hidden'; Mask.style.visibility = 'Hidden'" style = "float: right; display: inline; cursor: hand"> × </span> </div>
</div> </div>
<div id = "máscara"> </div>
<span onClick = "Mask.style.visibility = 'Visible'; Massage_box.style.visibility = 'Visible'" style = "cursor: hand"> <a href = "#"> <font size = 18px> Haga clic en este indicador </font> </a> </span>
</body>
</html>
Espero que este artículo sea útil para la programación de JavaScript de todos.