Este artigo descreve a implementação da caixa de prompt pop-up draggable pelo JS+CSS. Compartilhe para sua referência. O método de implementação específico é o seguinte:
Copie o código da seguinte forma: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitória // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> Caixa de prompt de pop-up arrastável criado por JS+CSS </ititle>
<style type = "text/css">
a {color:#000; Size da fonte: 12px; decoração de texto: nenhum}
A: Hover {color:#900; Decoração de texto: sublinhado}
corpo {background:; filtro: progid: dximageTransform.microsoft.gradient (gradientType = 0, startColorstr =#ffffff, endColorstr =#003366); Overflow: Hidden}
#Massage_Box {Position: Absolute; Esquerda: expressão ((body.clientwidth-350)/2); Em cima: Expressão ((Body.clientHeight-200)/2); Largura: 350px; Altura: 200px; Filtro: DropShadow (color =#666666, offx = 3, offy = 3, positivo = 2); Z-Index: 2; Visibilidade: Hidden}
#Mask {Position: Absolute; topo: 0; Esquerda: 0; Largura: Expressão (Body.ScrollWidth); Altura: Expressão (Body.ScrolHeight); Antecedentes:#666; filtro: alfa (opacidade = 60); Z-Index: 1; Visibilidade: Hidden}
.Massage {Border:#036 Solid; largura de fronteira: 1 1 3 1; largura: 95%; Altura: 95%; Antecedentes: #ffff; Cor:#036; tamanho de fonte: 12px; altura de linha: 150%}
.Header {Background:#036; altura: 10%; Fonte-família: Verdana, Arial, Helvetica, Sans-Serif; tamanho de fonte: 12px; preenchimento: 3 5 0 5; Cor: #FFF}
</style>
<!-Implementar o movimento da camada->
<Script Language = "JavaScript">
var obj = ''
document.onmouseup = mup
document.onMousEmove = mmove
função mdown (objeto) {
Object.id
document.all (obj) .setcapture ()
px = event.x-cocument.all (obj) .style.pixelleft;
py = event.y-cocument.all (obj) .style.pixeltop;
}
função mmove () {
if (obj! = '') {
document.all (obj) .style.left = event.x-px;
document.all (obj) .style.top = event.y-py;
}
}
função mup () {
if (obj! = '') {
document.all (obj) .releaseCapture ();
Obj = '';
}
}
</script>
</head> <body>
<div id = "massage_box"> <div>
<div onMousedown = mdown (massage_box)>
Em
</div> </div>
<div id = "máscara"> </div>
<span onclick = "mask.style.visibility = 'visível'; massage_box.style.visibility = 'visível'" style = "cursor: hand"> <a href = "#"> <font size = 18px> clique neste prompt </font> </a> </span>
</body>
</html>
Espero que este artigo seja útil para a programação JavaScript de todos.