JavaScript 弹出窗口生成器

• 下载源代码 - 363.5 KB
• 下载源代码和文档（外部链接） - 502 KB
• 自己试试

引言

这只是脚本的一个非正式且不全面的介绍；请在上方尝试它，并下载源代码和文档。

使用程序

PopUp 通过调用函数创建：PopUp(参数)，其中 参数 是一个包含个性化 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 被插入到一个新创建的 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);

显示随机图像作为启动画面

下面是一个启动画面示例，带有淡入淡出效果，通过服务器上的 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);
?>

结论

这个精简的脚本允许您使用几行代码创建弹出窗口，用于启动信息、图库或在线帮助；特别是对于后两者，可以在下一个版本中简化其使用。

历史

• 2020 年 4 月 27 日：初始版本