sirve - ¿Cómo codificar una ventana emergente modal de JavaScript(para reemplazar a Ajax)?
ventana flotante html5 (4)
He usado el plugin jQuery simplemodal y he estado bastante contento con él. Puedes consultarlo aquí .
Necesito reemplazar nuestros controles emergentes Ajax Modal con un equivalente de JavaScript. Usamos esto como un emergente de tipo de ayuda sensible al contexto. Hice una búsqueda rápida pero no vi exactamente lo que estaba buscando. Solo necesito un texto y un simple botón / enlace de Cerrar, pero me gustaría que la página se oscurezca debajo de la ventana emergente, como lo hace con el control modal de Ajax.
¿Alguien puede sugerir una buena solución emergente de JavaScript / tipo de ayuda que haya usado?
Puedo proporcionarte el código. Haga sus modificaciones según sea necesario, ¿de acuerdo?
JavaScript de página:
function myPop() {
this.square = null;
this.overdiv = null;
this.popOut = function(msgtxt) {
//filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;
this.overdiv = document.createElement("div");
this.overdiv.className = "overdiv";
this.square = document.createElement("div");
this.square.className = "square";
this.square.Code = this;
var msg = document.createElement("div");
msg.className = "msg";
msg.innerHTML = msgtxt;
this.square.appendChild(msg);
var closebtn = document.createElement("button");
closebtn.onclick = function() {
this.parentNode.Code.popIn();
}
closebtn.innerHTML = "Close";
this.square.appendChild(closebtn);
document.body.appendChild(this.overdiv);
document.body.appendChild(this.square);
}
this.popIn = function() {
if (this.square != null) {
document.body.removeChild(this.square);
this.square = null;
}
if (this.overdiv != null) {
document.body.removeChild(this.overdiv);
this.overdiv = null;
}
}
}
Ahora la página HTML, usando el archivo JavaScript:
<html>
<head>
<script type="text/javascript" src="NAME OF THE PAGE!.js"></script>
<style>
div.overdiv { filter: alpha(opacity=75);
-moz-opacity: .75;
opacity: .75;
background-color: #c0c0c0;
position: absolute;
top: 0px;
left: 0px;
width: 100%; height: 100%; }
div.square { position: absolute;
top: 200px;
left: 200px;
background-color: Menu;
border: #f9f9f9;
height: 200px;
width: 300px; }
div.square div.msg { color: #3e6bc2;
font-size: 15px;
padding: 15px; }
</style>
</head>
<body>
<div style="background-color: red; width: 200px; height: 300px;
padding: 20px; margin: 20px;"></div>
<script type="text/javascript">
var pop = new myPop();
pop.popOut("Jose leal");
</script>
</body>
</html>
Espero que esto pueda ayudar.
Tal vez estás buscando algo como esto ? [ui.jquery.com]
Es el más simple, y puede venir junto con muchos otros ojos dulces. Por supuesto, también puede consultar el resto de la página de complementos de jQuery , especialmente la sección de Windows y superposiciones .
Desarrollé una biblioteca de JavaScript llamada Msg . Permite crear fácilmente una ventana / ventana emergente modal. Crea una superposición detrás que oscurece el fondo. No tiene botón de cierre, pero se puede cerrar haciendo clic en la superposición de fondo.