Comment implémenter la boîte pop-up de couche de masque

Cet article décrit la méthode d'implémentation des cadres pop-up de couche de masque par JS. Partagez-le pour votre référence. L'analyse spécifique est la suivante:

Hier, le site Web de l'entreprise avait besoin d'une fenêtre contextuelle pour provoquer des informations et m'a demandé d'écrire le code JS pop-up et la fenêtre pop-up HTML ensemble, il suffit de l'appeler partout où vous en avez besoin.

Je ne dirai pas grand-chose, téléchargez simplement le code, et je pense qu'il y aura certainement des problèmes de compatibilité. Veuillez le signaler si vous le voyez:

Copiez le code comme suit: <style>

# H-dialog {affichage: aucun; position: absolu; z-index: 999999; largeur: 400px; hauteur: auto; Color d'arrière-plan: #fff;}

# H-dialog .close {float: droite; police-taille: 30px; marge-droite: 10px; margin-top: 5px; curseur: pointeur;}

# H-dialog .Title {hauteur: 40px; padding-left: 10px; taille de police: 20px; hauteur de ligne: 40px;}

# H-dialog #msgcont {height: 36px; Marge: 30px 0 50px; padding-left: 65px; Font-Size: 25px; line-height: 36px; Vertical-Align: Middle; Contexte: URL (../ images / ui_alert.png) sans répétition 20px 50%;}

</ style>

<div id = "h-dialog">

<a onclick = "popupclose (this)"> × </a>

<div> Tip </div>

<div id = "msgcont"> contenu </div>

</div>

<script type = "text / javascript">

// verrouiller l'écran d'arrière-plan

fonction lockscreen () {

var clienth = document.body.offsetheight; // Hauteur du corps

var clientw = document.body.offsetwidth; // Largeur du corps

var doch = document.body.scrollHeight; // Hauteur du navigateur

var docw = document.body.scrollwidth; // Largeur du navigateur

var bgw = clientw> docw? ClientW: DOCW; // Obtenez la largeur valide

var bgh = clienth> doch? ClientHh: Doch; // obtient le haut valide

var BlackBg = document.CreateElement ("div");

Blackbg.id = "Blackbg";

Blackbg.style.Position = "Absolute";

Blackbg.style.zindex = "99999";

Blackbg.style.top = "0";

Blackbg.style.left = "0";

BlackBg.Style.Width = BGW + "PX";

Blackbg.style.Height = BGH + "PX";

Blackbg.style.opacity = "0,4";

Blackbg.style.backgroundColor = "# 333";

Document.Body.ApendChild (BlackBG);

}

// Événement de bouton de fermeture

fonction popupclose (el) {

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

Blackbg && document.body.removechild (BlackBg);

el.parentnode.style.display = "Aucun";

}

// originaire

fonction autoclose (id) {

id = id || "H-dialog";

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

var objdiv = document.getElementById (id);

setTimeout (function () {

Blackbg && document.body.removechild (BlackBg);

objdiv.style.display = "Aucun";

}, 2000);

}

/ **

* Fonction: informations contextuelles

* Paramètre 1: Contenu d'information rapide

* Paramètre 2: L'état des informations d'invite par défaut est 0. Les informations rapides sont 1. Les informations de réussite sont

* Paramètre 3: ID du div pop-up, le "h-dialog" par défaut "

* Paramètre 4: l'ID du contenu de la fenêtre contextuelle, par défaut "MSGCONT"

** /

fonction showmsg (msg) {

msg = msg || "Veuillez réopérer";

var status = arguments [1] || 0,

popupId = arguments [2] || "H-dialog",

ContentId = arguments [3] || "msgnt";

lockscreen ();

// la hauteur et la largeur réelles de l'écran

var pageWidth = window.InnerWidth;

var pageHeight = window.innerHeight;

if (typeof pagewidth! = "nombre") {

if (document.compatMode == "CSS1Compat") {

pageWidth = document.DocumentElement.ClientWidth;

PageHeight = document.DocumentElement.ClientHeight;

} autre {

pageWidth = document.body.clientwidth;

pageHeight = document.body.clientHeight;

}

}

// La barre de défilement a une hauteur et une largeur

var scrollleft = window.Document.DocumentElement.Scrollleft;

var scrolltop = 0;

if (typeof window.pageyoffset! = 'undefined') {

scrollTop = window.pageyoffset;

} else if (typeof window.Document.compatMode! = 'Undefined' &&

window.Document.compatMode! = 'backcompat') {

ScrollTop = Window.Document.DocumentElement.ScrollTop;

} else if (typeof window.document.body! = 'undefined') {

ScrollTop = Window.Document.Body.ScrollTop;

}

var div_x = (pagewidth - 400) / 2 + scrollleft;

var div_y = (pageHeight - 200) / 2 + scrolltop;

var objDiv = document.getElementById (PopuPID);

if (status) {

document.getElementById (ContentId) .Style.Background = "URL ($ root / actifs / images / ui_success.png) No-Repeat 20px 50%";

}

document.getElementById (ContentId) .InnerHtml = msg;

objdiv.style.display = "bloc";

objdiv.style.left = div_x + "px";

objdiv.style.top = div_y + "px";

AutoClose (POPUPID);

}

</cript>

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