Thickbox

Thickbox是基于Jquery的,因此使用Thickbox需要下面四个文件:

  1. Thickbox.js----Thickbox主文件
  2. CSS文件----Thickbox.css
  3. 最后一个Loading图片----loadingAnimation.gif 
  4. Jquery.js-----Jquery主文件

学习如何弹出一张图片。

引入js文件(注意jquery库文件要在thickbox文件之前),图片放在img元素通过超链接打开,只需要设置超链接的class为thickbox,代码如下所示:

演示效果如下所示:

弹出框的使用

弹出一个页面和弹出一张思路一样,代码如下所示:

运行页面,效果如下所示:

由上可以看出,弹出窗口(div)右上角的关闭按钮为显示为"close or esc key",而不是中文的; 如果想把它变成[X]或"关闭"应该怎么来办呢?将thickbox.js文件打开,查找关键字"or esc key",将其删除,并将前面的close更改为[X]或"关闭",然后把文件另存为UTF-8格式,如果不保存为UTF-8的话,将会出现乱码。如下所示:

重新运行,如下所示:

thickbox 弹出层的遮住层透明度修改:

打开thickbox.css查找.TB_overlayBG 进行更改,如下所示:

t.hickbox插件默认情况是点击灰色的遮罩层就会关闭

把两个$("#TB_overlay").click(tb_remove);去掉就可以取消掉。

 

Tinybox

Tinybox是一个独立的弹出控件,不依赖与其他任何js库。其测试文件结构如下:

其中,javascript代码如下所示:

html页面布局:

运行效果如下:



Javascript高级编程看完后研究一下tinybox的代码,很有实际意义。

 

js弹出窗口的学习和使用的更多相关文章

  1. JS弹出窗口代码大全(详细整理)

    1.弹启一个全屏窗口 复制代码代码如下: <html> <body http://www.jb51.net','脚本之家','fullscreen');">; < ...

  2. js弹出窗口总结6种弹窗方法

    注: //关闭,父窗口弹出对话框,子窗口直接关闭 this.Response.Write("<script language=javascript>window.close(); ...

  3. 最完美解决方案:js弹出窗口关闭当前页面,而不弹出提示框

    该功能主要用于业务系统中的登录操作,登录后弹出全屏的业务系统主界面,而不需要工具栏.地址栏.菜单等功能. 之前针对不同浏览器找了无数种方法,包括网上能查到的所有方法,弹出的结果都不理想.结果有的IE6 ...

  4. js 弹出窗口 防止拦截,突破阻止,保存后打开

    <script language="javascript"> function orderprint() { var formUrl = "savedata_ ...

  5. js弹出窗口

    function openModalDialog(url, height, width) { var t_height = 400; var t_width = 600; if (!isNaN(hei ...

  6. [转]js来弹出窗口的详细说明

    1.警告对话框 <script> alert("警告文字") </script> 2.确认对话框 <script> confirm(" ...

  7. jquery-通过js编写弹出窗口

    本文转载 本文主要是通过js动态控制div的高度,css控制浮动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...

  8. 原生Js封装的弹出框-弹出窗口-页面居中-多状态可选

    原生Js封装的弹出框-弹出窗口-页面居中-多状态可选   实现了一下功能: 1.title可自定义 可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出 ...

  9. 原生JS实现弹出窗口的拖拽

    上一篇说了一下弹出窗口功能的实现思路,一般情况下紧接着就会需要做到弹窗的移动,当然现在有很插件.库比如hammer可以使用,效率也非常好.但我觉得还是有必要了解一下原生JS的实现思路及方式,如下: 思 ...

随机推荐

  1. 【Todo】【读书笔记】大数据Spark企业级实战版 & Scala学习

    下了这本<大数据Spark企业级实战版>, 另外还有一本<Spark大数据处理:技术.应用与性能优化(全)> 先看前一篇. 根据书里的前言里面,对于阅读顺序的建议.先看最后的S ...

  2. Binary Tree Paths

    Description: Given a binary tree, return all root-to-leaf paths. For example, given the following bi ...

  3. Ubuntu系统下面软件安装更新命令

    在ubuntu服务器下安装包的时候,经常会用到sudo apt-get install 包名 或 sudo pip install 包名,那么两者有什么区别呢? 1.区别 pip用来安装来自PyPI( ...

  4. python操作mongodb之六自定义类型存储

    from pymongo.mongo_client import MongoClient client=MongoClient('192.168.30.252',27017) client=drop_ ...

  5. wampserver2.5安装 redis缓存,igbinary, phalcon框架

    wampserver2.5安装 redis缓存,igbinary, phalcon框架 根据phalconphp说明文件,先将dll文件拖入到:安装盘:\wamp\bin\php\php5.5.12\ ...

  6. php数据通信方式

    一:curl$ch = curl_init();curl_setopt($ch,CURLOPT_SSL_VERIFYPEER,false);curl_setopt($ch,CURLOPT_TIMEOU ...

  7. rand()和srand()GetTickCount函数用法

    标准库<cstdlib>(被包含于<iostream>中)提供两个帮助生成伪随机数的函数: 函数一:int rand(void):从srand (seed)中指定的seed开始 ...

  8. 微信JS SDK Demo 官方案例

    微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统的能力,同时可以直接使用微信分享 ...

  9. css3中clip属性

    clip 属性用来设置元素的形状.用来剪裁绝对定位元素. 当一幅图像的尺寸大于包含它的元素时,"clip" 属性允许规定一个元素的可见尺寸,这样此元素就会被修剪并显示在这个元素中. ...

  10. (32)odoo中的编码问题

    对于全部是英文就不存在问题,但我们常用中文,这样会导致一个棘手的问题 约定: 系统Ubuntu trusty14.04 自带python2.7.6 python2.7.9 自己升级了 升级方法: -- ...