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.
Did you find some bug? Please contact me! http://otavioavila.com or otavioavila@gmail.com
为了增强大家对这个插件的重视程度，使用了重磅出击这个成语来形容这个插件，在大量的jQuery插件中，实现弹出新窗口的插件非常多，很多也非常有名，如jmodal等，但这些插件都只能实现弹出一个新窗口[有些可通过扩展实现弹出多个窗口]，所以对于这个jmpopups插件就显然不同，可实现在弹出的新窗口中再弹出另一个新窗口，以此类推，可弹出多层新窗口，所以这个插件非常的不错，同时使用简单，首先来看一下实现的效果：
使用说明
需要使用jQuery库文件和jmpopups库文件
需要自定义弹出新窗口显示的CSS样式
必优推荐级别：★★★★★
使用实例
一，包含文件部分
- <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
- <script type="text/javascript" src="jquery.jmpopups-0.5.1.js"></script>
二，HTML部分
- <p><a href="javascript:;" onclick="openStaticPopup()" title="Static example">弹出新窗口</a></p>
- <div id="myHiddenDiv">
- //这部分是新窗口的内容
- <p><a href="javascript:;" onclick="openAjaxPopup()" title="Ajax example">使用Ajax打开新窗口</a></p>
- </div>
三，Javascript部分
- <script type="text/javascript">
- //<![CDATA[
- $.setupJMPopups({
- screenLockerBackground: "#003366",
- screenLockerOpacity: "0.7"
- });
- function openStaticPopup() {
- $.openPopupLayer({
- name: "myStaticPopup",
- 550,
- target: "myHiddenDiv"
- });
- }
- function openAjaxPopup() {
- $.openPopupLayer({
- name: "mySecondPopup",
- 300,
- url: "biuuu_ajax.html"
- });
- }
- //]]>
- </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弹出框