Comment implémenter la couche contextuelle div dans les compétences js_javascript

L'exemple de cet article décrit la méthode d'implémentation de la couche contextuelle div dans js. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

On dit que maintenant que divers plug-ins sont sortis, il est vraiment facile d'implémenter une couche pop-up, mais parfois j'ai l'impression que ces plug-ins ne sont pas pratiques et recherchent souvent une écologie pure et originale en js . Permettez-moi de partager avec vous une couche contextuelle div js native. Des exemples, les amis dans le besoin peuvent y jeter un œil.

Pas besoin d'en dire plus, il suffit de poster le code Il y a des codes et des commentaires :

Copier le code Le code est le suivant :

/*
* Pop-up couche DIV
*/
fonction showDiv()
{
var Idiv = document.getElementById("Idiv");
var mou_head = document.getElementById('mou_head');
Idiv.style.display = "bloquer";
//Les parties suivantes doivent centrer le calque contextuel
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 grise et non cliquable
var procbg = document.createElement("div"); //Créez d'abord un div
procbg.setAttribute("id","mybg"); //Définir l'identifiant du div
procbg.style.background = "#000000";
procbg.style.width = "100%";
procbg.style.height = "100%";
procbg.style.position = "fixé";
procbg.style.top = "0";
procbg.style.left = "0";
procbg.style.zIndex = "500";
procbg.style.opacity = "0.6";
procbg.style.filter = "Alpha(opacité=70)";
//Page d'ajout de couche d'arrière-plan
document.body.appendChild(procbg);
document.body.style.overflow = "hidden"; //Annuler la barre de défilement

//Les parties suivantes implémentent l'effet de glissement du calque contextuel
var posX;
var posY;
mou_head.onmousedown=fonction(e)
{
if(!e) e = window.event; //IE
posX = e.clientX - parseInt(Idiv.style.left);
posY = e.clientY - parseInt(Idiv.style.top);
document.onmousemove = mousemove;
>
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";
>
>
function closeDiv() //Ferme le calque contextuel
{
var Idiv=document.getElementById("Idiv");
Idiv.style.display="none";
document.body.style.overflow = "auto"; //Restaurer la barre de défilement de la page
var body = document.getElementsByTagName("body");
var monbg = document.getElementById("monbg");
corps[0].removeChild(monbg);
>

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

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