如何编写JavaScript模式popup窗口(replaceAjax)?

我需要用JavaScript代替我们的Ajax Modal Popup控件。 我们用这个作为一个简单的上下文相关的帮助typespopup窗 我做了一个快速浏览,但没有看到我正在寻找什么。 我只需要一些文本和一个简单的closuresbutton/链接,但是我希望页面在popup窗口下面变暗,就像Ajax模式控件一样。

任何人都可以提出一个很好的JavaScriptpopup/帮助types的解决scheme,你用过?

4 Solutions collect form web for “如何编写JavaScript模式popup窗口(replaceAjax)?”

我可以提供你的代码。 根据需要进行修改,好吗?

页面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> 

希望这可以帮助。

我使用了简单的jQuery插件,我对此非常满意。 你可以在这里查看

也许你正在寻找这样的东西? [ui.jquery.com]

这是最简单的一个,可以捆绑很多其他的眼镜。 当然你也可以看看其他的jQuery插件页面 ,特别是Windows和Overlays部分 。

我开发了一个名为Msg的JavaScript库。 它允许轻松创build一个模式窗口/popup窗口。 它在背后创build一个叠加层,使背景变暗。 它没有closuresbutton,但可以通过单击背景覆盖来closures它。