JavaScript PopUp生成器

目录

介绍

使用程序

弹出窗口(PopUp )如何工作

一些例子

渐隐，样式和退出键关闭

将随机图像显示为Splash

结论

---

• 下载源代码363.5 KB
• 自己尝试

介绍

这只是非正式的脚本展示，并非详尽无遗。请参阅上文，自己尝试一下并下载源代码和文档。

使用程序

通过调用函数创建的PopUp：PopUp(parameters)其中parameters是一个对象，其中包含个性化PopUp所需的参数：

• cancel：PopUp将如何消失（通过点击或类似Escape，Delete键......或数毫秒后）
• content：必须显示的innerHTML内容（是内容）
• class, style：用于样式目的
• fade：与外观和/或PopUp消失有关的毫秒数 
• id：（ 可能是）PopUp容器的id
• left, top：屏幕上的位置，如果省略，PopUp则居中
• height, width：设置PopUp尺寸

仅content参数是必需的，所有其他参数都具有默认值或可选参数。例如，此语句... 

popUp({'content': "<img src='images/RabbitLake.jpg'>"})

...显示图像居中显示在屏幕上，而不更改其尺寸，并且通过单击完成删除。

弹出窗口(PopUp )如何工作

PopUp被插入到新创建的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被移除时，取消选择的发生（单击是默认值）模式和事件侦听器被除去。

一些例子

渐隐，样式和退出键关闭

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);
?>

结论

该精简脚本允许您创建弹出窗口来显示splash信息，galleries或通过几行代码在线帮助；特别地，对于后两者，在下一版本中可以简化其使用。