2008-11-14 24 views
8

Tôi cần phải thay thế Ajax các điều khiển Popup Modal của chúng tôi bằng một tương đương JavaScript. Chúng tôi sử dụng điều này như là một popup loại trợ giúp ngữ cảnh nhạy cảm đơn giản. Tôi đã duyệt nhanh nhưng không thấy được những gì tôi đang tìm kiếm. Tôi chỉ cần một số văn bản và một nút Đóng/liên kết đơn giản, nhưng tôi muốn trang bị tối đen bên dưới cửa sổ bật lên, giống như với điều khiển phương thức Ajax.Làm thế nào để mã một cửa sổ bật lên phương thức JavaScript (để thay thế Ajax)?

Có ai có thể đề xuất giải pháp bật lên/trợ giúp loại JavaScript tốt đẹp mà bạn đã sử dụng không?

Trả lời

24

Tôi có thể cung cấp cho bạn mã. Thực hiện các sửa đổi của bạn khi cần thiết, OK?

Javascript Page:

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

    } 
} 

Bây giờ trang HTML, sử dụng các tập tin 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> 

Hy vọng rằng điều này có thể giúp đỡ.

0

Có thể bạn đang tìm kiếm thứ gì đó như this? [ui.jquery.com]

Đây là cách đơn giản nhất và có thể đi kèm với rất nhiều kẹo mắt khác. Tất nhiên bạn cũng có thể nhìn xung quanh phần còn lại của jQuery plug-ins page, đặc biệt là Windows and Overlays section.

7

Tôi đã sử dụng plugin jQuery đơn giản và tôi đã khá hài lòng với nó. Bạn có thể kiểm tra nó ra here.

0

Tôi đã phát triển một thư viện javascript có tên là Msg. Nó cho phép dễ dàng tạo ra một cửa sổ phương thức/popup. Nó tạo ra một lớp phủ đằng sau nó làm tối nền. Nút này không có nút đóng nhưng có thể đóng bằng cách nhấp vào lớp phủ nền.

Các vấn đề liên quan