Cet article décrit la méthode de mise en œuvre complète de la couche div dronable et fermée JS. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
La copie de code est la suivante:
<! 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">
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> JS apparaît d'une couche div qui peut être traînée et fermée </Title>
<style>
html, corps {hauteur: 100%; débordement: caché;}
corps, div, h2 {marge: 0; rembourrage: 0;}
corps {police: 12px / 1,5 tahoma;}
Centre {padding-top: 10px;}
bouton {curseur: pointeur;}
#win {position: absolu; top: 50%; gauche: 50%; largeur: 400px; hauteur: 200px; fond: #ffff; bordure: 4px solide # f90; marge: -102px 0 0 -202px; affichage: aucun;}
H2 {Font-Size: 12px; hauteur: 18px; Text-Align: à droite; arrière-plan: # fc0; Border-Bottom: 3px solide # f90; padding: 5px; curseur: mouvement;}
H2 Span {Color: # F90; Cursor: Pointer; Background: #FFF; Border: 1Px Solid # F90; Padding: 0 2px;}
</ style>
<cript>
window.onload = function ()
{
var owin = document.getElementById ("win");
var obtn = document.getElementsByTagName ("Button") [0];
var oclose = document.getElementById ("close");
var oh2 = owin.getElementsByTagName ("H2") [0];
var bdrag = false;
var disx = disy = 0;
obtn.onclick = function ()
{
owin.style.display = "bloc"
};
oclose.onclick = function ()
{
owin.style.display = "aucun"
};
oclose.onmousedown = fonction (événement)
{
(événement || window.event) .CancelBubble = true;
};
oh2.onmousedown = fonction (événement)
{
var event = événement || window.event;
bdrag = true;
disx = event.clientx - owin.offsetLeft;
disy = event.clienty - owin.offsettop;
this.setCapture && this.setCapture ();
retourner faux
};
document.onmousemove = fonction (événement)
{
si (! bdrag) retourner;
var event = événement || window.event;
var il = event.clientx - disx;
var it = event.clienty - disy;
var maxl = document.DocumentElement.ClientWidth - owin.offsetwidth;
var maxt = document.DocumentElement.ClientHeight - owin.offsetheight;
il = il <0? 0: IL;
il = il> maxl? Maxl: IL;
it = it <0? 0: It;
it = it> maxt? maxt: it;
owin.style.margintop = owin.style.marginleft = 0;
owin.style.left = il + "px";
owin.style.top = it + "px";
retourner faux
};
document.onmouseup = window.onblur = oh2.onloseCapture = function ()
{
bdrag = false;
OH2.ReleAsCapture && oh2.ReleSeActture ();
};
};
</cript>
</ head>
<body>
<div id = "win"> <h2> <span id = "close"> × </span> </h2> </div>
<Farcy> <Fut-Button> POP Layer </fut Button> </ Center>
</docy>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.