2008-11-14 10 views
8

Ich muss unsere Ajax Modal Popup-Steuerelemente durch ein JavaScript-Äquivalent ersetzen. Wir verwenden dies als einfaches kontextsensitives Hilfe-Popup. Ich habe schnell geblättert, aber nicht ganz gesehen, wonach ich gesucht habe. Ich brauche nur etwas Text und eine einfache Schließen-Schaltfläche/Link, aber ich möchte die Seite unter dem Popup verdunkeln, wie es mit der Ajax Modal Control tut.Wie ein modales JavaScript-Popup (um Ajax zu ersetzen)?

Kann jemand eine nette JavaScript-Popup/Hilfe-Lösung vorschlagen, die Sie verwendet haben?

Antwort

24

Ich kann Ihnen den Code bereitstellen. Nehmen Sie Ihre Änderungen nach Bedarf vor, OK?

Seite 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; 
     } 

    } 
} 

Nun ist die HTML-Seite, die Datei mit Hilfe von 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> 

Hoffnung, dass dies helfen kann.

7

Ich habe das SimpleModel jQuery Plugin benutzt und ich war ziemlich glücklich damit. Sie können es überprüfen here.

0

Ich entwickelte eine Javascript-Bibliothek namens Msg. Es erlaubt, einfach ein modales Fenster/Popup zu erstellen. Es erzeugt eine Überlagerung dahinter, die den Hintergrund verdunkelt. Es hat keine Schaltfläche zum Schließen, aber es kann geschlossen werden, indem Sie auf das Hintergrund-Overlay klicken.

Verwandte Themen