2008-11-14 15 views
8

Muszę zastąpić nasze formanty pop-up z Ajax z odpowiednikiem JavaScript. Używamy tego jako prostego kontekstowego typu pomocy typu popup. Zrobiłem szybkie przeglądanie, ale nie widziałem dokładnie tego, czego szukałem. Potrzebuję tylko tekstu i prostego przycisku/przycisku zamykania, ale chciałbym, aby strona była przyciemniona poniżej popupu, tak jak ma to miejsce w przypadku kontroli modalnej Ajax.Jak kodować wyskakujące okienko JavaScript (aby zastąpić Ajax)?

Czy ktoś może zaproponować fajne wyskakujące okienka JavaScript/pomoc, których używałeś?

Odpowiedz

24

Mogę podać kod. Dokonaj niezbędnych modyfikacji, OK?

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

    } 
} 

Teraz strona HTML, za pomocą pliku 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> 

nadzieję, że to może pomóc.

7

Użyłem prostopadłowej wtyczki jQuery i byłem z niej bardzo zadowolony. Możesz to sprawdzić here.

0

Opracowałem bibliotekę javascript o nazwie Msg. Pozwala to łatwo stworzyć modalne okno/popup. Tworzy za nim nakładkę, która przyciemnia tło. Nie ma przycisku zamknięcia, ale można go zamknąć, klikając nakładkę tła.

Powiązane problemy