简易弹窗脚本介绍

以下内容是对一个简易弹窗脚本的非正式介绍,它不是详尽的文档。可以通过上面的链接亲自尝试并下载源代码和文档。

如何使用程序

弹窗是通过调用以下函数创建的:

PopUp(parameters)

其中parameters是一个对象,包含个性化弹窗所需的参数:

  • cancel: 弹窗如何消失(通过点击或按键如Escape、Delete等,或者在一定毫秒数后)
  • content: 必须显示的内容(它是innerHTML内容)
  • class, style: 用于样式设置
  • fade: 与弹窗出现和/或消失相关的毫秒数
  • id: (可能的)弹窗容器的id
  • left, top: 屏幕上的位置,如果省略,则弹窗居中
  • height, width: 设置弹窗的尺寸

只有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); ?>
沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485