以下内容是对一个简易弹窗脚本的非正式介绍,它不是详尽的文档。可以通过上面的链接亲自尝试并下载源代码和文档。
弹窗是通过调用以下函数创建的:
PopUp(parameters)
其中parameters
是一个对象,包含个性化弹窗所需的参数:
只有content
参数是必需的,其他参数都有默认值或可选。例如,以下语句...
popUp({
'content': '<img src='images/RabbitLake.jpg'>'
})
...会在屏幕上居中显示图片,不改变其尺寸,并且通过点击来删除。
弹窗被插入到一个新创建的div
标签中;这个div
成为通过参数提供的可能的id
的子元素,否则,它被插入到页面的开头:
(document.body.insertAdjacentElement('afterbegin',link))
如果取消模式是通过点击或按键,会添加适当的事件监听器:
if (typeof parms.cancel == "number") setTimeout(closePopUp, parms.cancel-fade[1], fade[1]);
else if (typeof parms.cancel.toLowerCase() != "no") {
if (parms.cancel.toLowerCase() == "click") {
link.addEventListener("click", clickOnce);
} else {
window.addEventListener("keydown", hitOnce);
}
}
创建的div
在选定的取消模式(默认为点击)发生时被移除,事件监听器也被移除。
渐变、样式和Escape键关闭:
var parms = {
'fade': '2000 2000',
'cancel': "Escape",
'style': "text-align: center"
}
parms['content'] =
'<H3>Rabbit lake near Montalto Dora</H3><img src=\'images/RabbitLake.jpg\'>'
;
popUp(parms);
显示随机图片作为Splash:
以下是带有渐变效果的Splash示例,通过服务器上的PHP脚本接收随机图片。
var parms = {
'fade': '2000 2000',
'cancel': 5000
}
parms['content'] =
'<img src=\'getImage.php?R='+
Date.now()+
'>'
;
PopUp(parms);
其中的?R="+Date.now()+"
是为了避免图片缓存。
<?php
function randomImg($folder) {
$aImages = glob($folder .
'/*.{jpg,jpeg,png,gif}',
GLOB_BRACE);
shuffle($aImages);
return array_pop($aImages);
}
$fileImage = randomImg("images");
$aMimeTypes = array(
'jpeg' => 'image/jpeg',
'jpg' => 'image/jpeg',
'png' => 'image/png',
'gif' => 'image/gif',
);
$path_parts = pathinfo($fileImage);
header("Content-type: " .$aMimeTypes[$path_parts['extension']]);
readfile("$fileImage");
exit(0);
?>