jmpopups example page

jmpopups - example page

This is a page with a usage example of the library jmpopups.
For more details access http://jmpopups.googlecode.com

$.openPopupLayer({name: "mySecondPopup", 550,target: "myHiddenDiv"});

Open a popup using a html content from a hidden element.

Download this example.

Did you find some bug? Please contact me! http://otavioavila.com or otavioavila@gmail.com

为了增强大家对这个插件的重视程度，使用了重磅出击这个成语来形容这个插件，在大量的jQuery插件中，实现弹出新窗口的插件非常多，很多也非常有名，如jmodal等，但这些插件都只能实现弹出一个新窗口[有些可通过扩展实现弹出多个窗口]，所以对于这个jmpopups插件就显然不同，可实现在弹出的新窗口中再弹出另一个新窗口，以此类推，可弹出多层新窗口，所以这个插件非常的不错，同时使用简单，首先来看一下实现的效果：

[jmpopups二级窗口]

点我查看在线实例
点我下载实例源代码

使用说明
需要使用jQuery库文件和jmpopups库文件
需要自定义弹出新窗口显示的CSS样式
必优推荐级别：★★★★★

使用实例
一，包含文件部分

1. <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
2. <script type="text/javascript" src="jquery.jmpopups-0.5.1.js"></script>

二，HTML部分

1. <p><a href="javascript:;" onclick="openStaticPopup()" title="Static example">弹出新窗口</a></p>
2. <div id="myHiddenDiv">
3. //这部分是新窗口的内容
4. <p><a href="javascript:;" onclick="openAjaxPopup()" title="Ajax example">使用Ajax打开新窗口</a></p>
5. </div>

三，Javascript部分

1. <script type="text/javascript">
2. //<![CDATA[
3. $.setupJMPopups({
4. screenLockerBackground: "#003366",
5. screenLockerOpacity: "0.7"
6. });
7. function openStaticPopup() {
8. $.openPopupLayer({
9. name: "myStaticPopup",
10. 550,
11. target: "myHiddenDiv"
12. });
13. }
14. function openAjaxPopup() {
15. $.openPopupLayer({
16. name: "mySecondPopup",
17. 300,
18. url: "biuuu_ajax.html"
19. });
20. }
21. //]]>
22. </script>

分别定义了两个函数，openStaticPopup弹出静态窗口和openAjaxPopup弹出动态窗口，前者是直接取当前页面的内容，后者是通过ajax取远程URL的内容。

如上实例，当点击链接“弹出新窗口”后，弹出一个隐藏的ID为myHiddenDiv的DIV层，这一部分就是最常见的弹出新窗口，然后再点击新窗口中的链接“使用Ajax打开新窗口”后，使用ajax的方式调用ajax_example.html的内容，弹出另一个新的窗口，可依此方式使用jmpopups插件弹出更多的新窗口。

jmpopups可自定义新窗口的参数如下：
name表示新窗口的标题，如上：myStaticPopup
width表示新窗口的宽度，如上：300
target表示弹出的目标DIV[隐藏的DIV]，如上：myHiddenDiv
url表示使用Ajax的方式获取远程的内容，如上：biuuu_ajax.html

同时jmpopups可自定义全局的新窗口配置，如下
screenLockerBackground表示弹出新窗口后背景锁定的颜色，默认为"#000"
screenLockerOpacity表示弹出新窗口后背景锁定的颜色透明度，默认为"0.5"

必优认为这个jmpopups插件是一个非常实用的插件，在很多的具体应用中，单纯的一个窗口很难满足需求，有些需要在一级新窗口中再实现二级新窗口，而这个jmpopups插件实现了这一点，因此实用性将非常强，预计这个插件将与jmodal插件一样非常流行，同时插件作者也在Google Code开通了使用和介绍的页面，具体可查看http://code.google.com/p/jmpopups/。

能够在周末看到这么好的一个插件，确实是非常开心的一件事，这给必优带来了一个启示：很多的东西，稍微的改进就是一个伟大的创新，创新无处不在。

点我下载实例源代码
http://jquerycodes.googlecode.com/files/jmpopups-example.zip

其它可实现弹出新窗口的插件汇总
jQuery插件PiroBox弹出图片盒实现Javascript新窗口全屏图片展示功能
jQuery插件floatbox浮动层实现javascript弹出浮动窗口功能
jQuery插件FloatDialog浮动对话框
jQuery插件infoBar为例谈谈如何制作弹出信息提示框
jQuery插件jmodal模拟对话框实现javascript弹出对话框功能
jQuery插件ThickBox实现javascript弹出框
简单的jQuery插件pop弹出框

http://www.biuuu.com/