轻量级的 JavaScript 弹出框脚本:TinyBox
ThickBox 是一个基于 JQuery 类库的扩展,它能在浏览器界面上显示非常棒的弹出框,它可以显示单图片,多图片,AJAX 请求内容或链接内容。
要使用 ThickBox,需要下载三个文件:
- JS 文件:thickbox.js 或者压缩版本 thickbox-compressed.js。
- CSS 文件:ThickBox.css
- 最后一个 Loading 图片:loadingAnimation.gif
除了以上三个文件之外,你还需要有 jQuery JavaScript 类库 或者压缩版,甚至可以使用 Google 提供 CDN 加速的版本 。
ThickBox 使用也非常见,首先在 HTML 文件的 HEAD 导入 jQuery JS 和 ThickBox JS 文件,并且 jQuery JS 文件必须在前:
<script type="text/javascript" src="path-to-file/jquery.js"></script> <script type="text/javascript" src="path-to-file/thickbox.js"></script>
然后打开 thinkbox.js 文件通过 tb_pathToImage 这个变量来设置 loadingAnimation.gif 文件的路径。
然后在 HEAD 导入 thickbox.css 文件:
<link rel="stylesheet" href="path-to-file/thickbox.css" type="text/css" media="screen" />
当然你也可以吧 thickbox.css 里面的内容复制到你现在的 CSS 文件中,最后你只要给 a 元素天添加 class="thickbox" 属性就可以开始用 thickbox。详细使用可以查看 ThickBox 官方教程 。
我在使用中碰到的最大问题是,如果网页上有 Flash 的话,往往 Flash 会把 ThickBox 的弹出框给挡住,这时的解决方法也是非常简单,就是给 Flash 设置透明的参数:wmode="transparent"。
详细就是给 Flash 的 object 标签添加如下参数:<param name="wmode" value="transparent">
, 并在 embed 标签中设置 wmode="transparent",如果使用 AC_FL_RunContent,可以加多一对参数 'wmode','transparent' 即可。如果还是有问题,可以尝试给 Flash 外面增加一个 DIV 标签,并给他设置 z-index:0;
的样式。
实例:
TINY.box.show('advanced.html',1,300,150,1,3)
它一共有6个参数,第一个是要显示的 AJAX 或 HTML 内容。第二个是设置是否为 AJAX。第三个是宽度,0 为自动。第四个是高度,0 为自动。第五个是是否设置隐藏,第六个则是设置是否自动隐藏的时间。
演示 + 下载
请注意下面的顺序:
正确:
<a id="forgot" href="#">Forgot your password?</a> <script type="text/javascript">T$('forgot').onclick = function(){ TINY.box.show('advanced.html',1,300,150,1)} </script>
错误:
<script type="text/javascript">T$('forgot').onclick = function(){ TINY.box.show('advanced.html',1,300,150,1)} </script> <a id="forgot" href="#">Forgot your password?</a>
轻量级的 JavaScript 弹出框脚本:TinyBox相关推荐
- JavaScript弹出框、对话框、提示框、弹窗总结
JavaScript弹出框.对话框.提示框.弹窗总结. 1.JS的三种最常见的对话框 //====================== JS最常用三种弹出对话框 =================== ...
- javascript弹出框_了解JavaScript第2部分(变量和弹出框简介)
javascript弹出框 Hello, 你好, It's been long time since I wrote my last article on this series. You may l ...
- JavaScript弹出框 元素文本输入
JavaScript弹出框 元素文本输入 通过是否确定或者取消进行判断,利用confirm语法,msg会变成布尔值,确定是true,取消是false,可通过,msg值进行判断 msg=confirm( ...
- html弹出框教程,JavaScript 弹出框
JavaScript 弹出框 在JavaScript中,您可以创建对话框或弹出窗口来与用户进行交互. JavaScript具有三种不同类型的弹出框:警告框,确认框和提示框. 警告框 警告框是最简单的弹 ...
- Java程序员从笨鸟到菜鸟之(三十)javascript弹出框、事件、对象化编程
一:弹出框 JavaScript中有三种弹出框:警告(alert).确认(confirm)以及提问(prompt). 1.警告(alert) 在访问网站的时候,你遇到"咚"的一声 ...
- JavaScript弹出框
提到弹出框,首先想到的alert()了,其次想到的也还是alert(),其实在js中有三种弹出框,下面我们一一说明. 1,仅确定. 即:对话框界面上只有确定按钮.该功能可以使用alert()方法实现. ...
- java实现ln10_Java程序员从笨鸟到菜鸟之(三十)javascript弹出框、事件、对象化编程...
一:弹出框 JavaScript中有三种弹出框:警告(alert).确认(confirm)以及提问(prompt). 1.警告(alert) 在访问网站的时候,你遇到"咚"的一声, ...
- [原]一步一步自己制作弹出框
说到javascript弹出框的制作,将其实现步骤分开,其实很容易. 下面,将拆分页面弹出框的制作步骤. 首先,准备编辑工具(废话),其实,您可以使用notepad..嘿嘿. 弹出框的组成结构: ...
- 如何妥善处理WebBrowser对Javascript的错误问题,阻止JS弹出框,提高用户体验(原创)...
由于项目需求,最近转战客户端,开始搞浏览器开发.众所周知,现在在微软平台上开发浏览器,最常用的方法就是扩展Webbrowser,但是首先要清楚的是,WebBrowser控件仅仅是对WebBrowser ...
最新文章
- eclipse折叠所有代码快捷键
- ISP PIPLINE (九_2) Denoise 之 time domain denoise
- 如何列出Git 1.7+中的所有远程分支?
- Catalyst 4000 6000配置经验谈(一)
- 理解IDS的主动响应机制
- 小工匠聊架构-写给研发工程师的全链路压测
- Dataset之AllstateClaimsSeverity:AllstateClaimsSeverity数据集(Kaggle2016竞赛)的简介、下载、案例应用之详细攻略
- 论文浅尝 | 基于Freebase的问答研究
- 【clickhouse】如何处理ClickHouse超时问题
- Eclipse的vim插件viPlugin的安装
- Codeforces Round #629 (Div. 3) A~C
- html5 预览dwg,哪个企业网盘可以实现dwg在线预览?
- python面向对象编程指南 豆瓣_Python面向对象编程
- IDEA清除Local History
- 上门洗车APP --- Android客户端开发 之 项目结构介绍,大厂面试必备技能
- MIT 6.828 Lab1(从引导扇区开始)
- 解决Qt5.7.0 cannot find -lGL
- 苹果x重启方法_iPhone无法开机怎么办?三种快速维修方法
- 人工智能医疗检测:微核细胞情况自动检出率可达90%
- 2019-12-17 摘抄: HPET 硬件高精度时钟源Linux内核引导选项
热门文章
- 15 SD配置-企业结构-分配-给工厂分配起运点
- 23 MM配置-采购-采购信息记录-定义屏幕格式
- 字符串转换到double数组
- NOIP 2007 普及组初赛试题(C++)(无答案)
- sqllite java 代码,非常简单的SQLite的Java程序
- QT配置OpenCV(二):成功
- PyTorch+CUDA+cudnn安装
- PyQT:This application failed to start because no Qt platform plugin could be initialized.
- OpenCL_Barrier同步
- 2 RepMLP:卷积重参数化为全连接层进行图像识别 (Arxiv)