Méthode JS pour implémenter la couche pop-up div

Cet article décrit la méthode de mise en œuvre de la couche pop-up div par JS. Partagez-le pour votre référence. L'analyse spécifique est la suivante:

Soit dit en passant, il est vraiment facile d'implémenter des couches pop-up lorsque divers plug-ins sont publiés. Cependant, je pense parfois que ces plug-ins ne sont pas pratiques et trouvent souvent des choses originales pures JS. Permettez-moi de partager avec vous une instance de couche pop-up native div div. Les amis dans le besoin peuvent jeter un œil.

Inutile de dire que publiez simplement le code. Il y a des codes et des commentaires:

Copiez le code comme suit: / *

* Apparaître la couche div

* /

fonction showDiv ()

{

var idiv = document.getElementById ("idiv");

var moou_head = document.getElementById ('Mou_head');

Idiv.style.display = "bloc";

// Les pièces suivantes doivent être centrées pour afficher la couche pop-up

Idiv.style.left = (document.DocumentElement.ClientWidth-idiv.ClientWidth) /2+Document.DocumentElement.Scrollleft+ "PX";

Idiv.style.top = (document.DocumentElement.ClientHeight-idiv.ClientHeight) /2+Document.DocumentElement.ScrollTop-50+ "PX";

// Les parties suivantes rendent la page entière gris-clicable

var procbg = document.CreateElement ("div"); // Créer un div d'abord

procbg.setAttribute ("id", "mybg"); // définir l'ID du div

procbg.style.background = "# 000000";

procbg.style.width = "100%";

procbg.style.height = "100%";

procbg.style.position = "fixe";

procbg.style.top = "0";

procbg.style.left = "0";

procbg.style.zindex = "500";

procbg.style.opacity = "0,6";

procbg.style.filter = "alpha (opacité = 70)";

// Ajouter la couche d'arrière-plan à la page

Document.Body.ApendChild (procbg);

document.body.style.overflow = "Hidden"; // Annuler la barre de défilement

// Les parties suivantes réalisent l'effet de traînée de la couche pop-up

var posx;

var posy;

Mou_head.onmousedown = fonction (e)

{

if (! e) e = window.event; // c'est-à-dire

posx = e.clientx - parseInt (idiv.style.left);

posy = e.clienty - parseInt (idiv.style.top);

document.onmousemove = mousmove;

}

document.onmouseup = function ()

{

document.onMouseMove = null;

}

Fonction MouseMove (EV)

{

if (ev == null) ev = window.event; // ie

Idiv.style.left = (ev.clientx - posx) + "px";

Idiv.style.top = (ev.clienty - posy) + "px";

}

}

fonction closev () // ferme la couche pop-up

{

var idiv = document.getElementById ("idiv");

Idiv.style.display = "Aucun";

document.body.style.overflow = "auto"; // Restaurer la barre de défilement de la page

var body = document.getElementsByTagName ("Body");

var mybg = document.getElementById ("mybg");

corps [0] .removechild (mybg);

}

<! - La couche pop commence->

<div id = "idiv" style = "affichage: aucun; position: absolue; z-index: 1000; fond: # 67a3d9;">

<div id = "Mou_head" 100px; hauteur = 10px; index z: 1001; Position: Absolute; "> Ceci est utilisé pour implémenter les couches de glisser </div>

<input type = "bouton" value = "close" onclick = "closev ();" />

</div>

<! - end->

Quant à certains effets d'embellissement, vous pouvez les modifier vous-même.

J'espère que cet article sera utile à la programmation JavaScript de tous.