Este artículo describe el método para implementar marcos emergentes de la capa de máscara por JS. Compártelo para su referencia. El análisis específico es el siguiente:
Ayer, el sitio web de la compañía necesitaba una ventana emergente para solicitar información, y me pidió que escribiera el código Pop-up JS y la ventana emergente HTML juntos, simplemente llámela donde la necesite.
No diré mucho, solo sube el código, y siento que definitivamente habrá problemas de compatibilidad. Por favor, indíquelo si lo ve:
Copie el código de la siguiente manera: <Syle>
#H-dialog {Display: None; Position: Absolute; Z-Index: 999999; ancho: 400px; altura: Auto; Color de fondo: #fff;}
#H-dialog .close {float: right; font-size: 30px; margin-right: 10px; margin-top: 5px; cursor: pointer;}
#H-dialog .title {altura: 40px; relleno-izquierda: 10px; tamaño de fuente: 20px; Línea-aguja: 40px;}
#H-dialog #msgcont {altura: 36px; margen: 30px 0 50px; relleno-izquierda: 65px; tamaño de la fuente: 25px; línea de línea: 36px; vertical-align: medio; Antecedentes: url (../ imágenes/ui_alert.png) No-repeat 20px 50%;}
</style>
<div id = "H-dialog">
<a onClick = "PopupClose (this)"> × </a>
<div> consejo </div>
<div id = "msgcont"> contenido </div>
</div>
<script type = "text/javaScript">
// bloquea la pantalla de fondo
function lockscreen () {
var clienth = document.body.offsetheight; // Altura del cuerpo
var clientw = document.body.offsetWidth; // ancho del cuerpo
var doch = document.body.scrollheight; // Altura del navegador
var docw = document.body.scrollwidth; // ancho del navegador
var bgw = clientw> docw? ClientW: DOCW; // Obtener el ancho válido
var bgh = clienth> docch? Clienth: Doch; // Obtener el alto válido
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.appendChild (blackbg);
}
// Evento de botón de cierre
función popupClose (el) {
var blackbg = document.getElementById ("blackbg");
blackbg && document.body.removechild (blackbg);
el.parentnode.style.display = "Ninguno";
}
//Originar
función 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 = "Ninguno";
}, 2000);
}
/**
*Función: información emergente
* Parámetro 1: Contenido de información rápida
* Parámetro 2: El estado de información de solicitud predeterminado es 0. La información de solicitud es 1. La información de éxito es
* Parámetro 3: La ID de la emergencia emergente, el "H-dialog" predeterminado
* Parámetro 4: la identificación del contenido de la ventana emergente, predeterminado "msgcont"
**/
función showmsg (msg) {
msg = msg || "Por favor reoperar";
estado var = argumentos [1] || 0,
PopUpid = Argumentos [2] || "H-dialog",
contentId = argumentos [3] || "msgcont";
bloqueo de bloqueo ();
// La altura y el ancho reales de la pantalla
var pageWidth = window.innerWidth;
var pageHeight = window.innerHeight;
if (typeof pageWidth! = "número") {
if (document.compatmode == "CSS1COMPAT") {
PageWidth = document.documentelement.clientWidth;
PageHeight = document.documentelement.clientHeight;
} demás {
PageWidth = document.body.clientWidth;
PageHeight = document.body.clientHeight;
}
}
// La barra de desplazamiento tiene altura y ancho
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/assets/images/ui_success.png) no-repeat 20px 50%";
}
document.getElementById (contentId) .innerhtml = msg;
objdiv.style.display = "bloque";
objdiv.style.left = div_x + "px";
objdiv.style.top = div_y + "px";
AutoClose (PopUpid);
}
</script>
Espero que este artículo sea útil para la programación de JavaScript de todos.