Multifaceted Lightbox

这个js能够将用户的注意吸引到被特殊分割出来的页面,它相当如一个对话框,也就是
说,当用户点击处理过的链接后页面的其他部分间无法使用。
此版本支持Sring,Image,Local element,AJAX。

使用方法:

1.将以下代码放到header部分

<link rel="stylesheet" type="text/css" href="page.css">
<link rel="stylesheet" type="text/css" href="lightbox.css">
<script language="javascript" src="prototype.js"></script>
<script language="javascript" src="mf_lightbox.js"></script>
<script language="javascript">
Event.observe(window, 'load', init, false);

function init() {
Lightbox.init();
}
</script>

2.String

<a href="#" onClick="Lightbox.showBoxString('内容', 300, 200);return false;">String</a>

其中300,200表示框体大小。

String

2.Image

<a href="http://www.hotajax.org/download/lightbox/mf_lightbox/images/05.jpg" onClick="Lightbox.showBoxImage(this.href);return false;">Image</a>

Image

3.Local element

<a href="#" onClick="Lightbox.showBoxByID('hiddenDiv', 350, 300);return false;">Local element</a>

Local element

you can pass it the ID of an element on the page to be shown in the lightbox. When the lightbox is closed, the element will be hidden and added as the last element within the body

4.AJAX

<a href="#" onClick="Lightbox.showBoxByAJAX('ajax_fragment.html', 150, 300);return false;">AJAX</a>

所加载的内容为单独页面

AJAX

如果所加载的内容超过用户的窗口它能够自动改变窗口大小(image除外)

下载

Download the script, stylesheets, http://www.hotajax.org/download/lightbox/mf_lightbox/images, and examples...

More Examples

© 2006 Greg Neustaetter