如何编写JavaScript模式弹出窗口（替换Ajax）？

我需要用JavaScript等价物替换我们的Ajax Modal Popup控件。我们将其用作简单的上下文相关帮助类型弹出窗口。我做了一个快速浏览，但没有看到我正在寻找的东西。我只需要一些文本和一个简单的关闭按钮/链接，但是我希望页面在弹出窗口下面变暗，就像使用Ajax模式控件一样。如何编写JavaScript模式弹出窗口（替换Ajax）？

任何人都可以提出一个很好的JavaScript弹出/帮助类型的解决方案，你已经使用？

来源

2008-11-14 SunfiShie

我可以为您提供代码。根据需要进行修改，好吗？

页面的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; 
     } 

    } 
}

现在的HTML页面，使用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>

希望这可以帮助。

来源

2008-11-14 02:00:32