Cómo codificar una ventana emergente modal de JavaScript (para reemplazar a Ajax)?

Necesito reemplazar nuestros controles emergentes de Ajax con un JavaScript equivalente. 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.Cómo codificar una ventana emergente modal de JavaScript (para reemplazar a Ajax)?

¿Alguien puede sugerir una buena solución de JavaScript emergente/tipo de ayuda que haya utilizado?

Fuente

2008-11-14 SunfiShie

Puedo proporcionarle el código. Haga sus modificaciones según sea necesario, ¿de acuerdo?

Página JavaScript:

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, utilizando 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>

la esperanza de que esto puede ayudar.

Fuente

2008-11-14 02:00:32

Tal vez usted está buscando algo como this? [ui.jquery.com]

Es el más simple, y puede venir incluido con muchos otros ojos dulces. Por supuesto, también puede consultar el resto de jQuery plug-ins page, especialmente el Windows and Overlays section.

Fuente

2008-11-14 01:42:45 voyager

He usado el plugin jQuery simplemodal y he estado bastante contento con él. Puede verificarlo here.

Fuente

2008-11-14 01:44:50

Desarrollé una biblioteca 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.

Fuente

2017-07-28 01:52:13 madprops

Cómo codificar una ventana emergente modal de JavaScript (para reemplazar a Ajax)?

Respuesta

Cuestiones relacionadas