弹出层之3:JQuery.tipswindow
tipswindow是一个很一般的JQuery弹出层插件,但使用简单,有相对漂亮的外观,代码比较通俗。下面介绍使用方法:
1、首先引入该插件相关文件,分别是样式,JQuery库,该插件
<scriptsrc="../Contents/JS/jquery-1.5.js"type="text/javascript"></script>
<scriptsrc="tipswindown.js"type="text/javascript"></script>
2、修改tipswindow.css文件中图片的路径,默认与css文件在同一个目录下。
3、编写代码,如在图片上设置单击事件后放大显示图片:
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<linkhref="tipswindown.css"rel="stylesheet"type="text/css"/>
<scriptsrc="../Contents/JS/jquery-1.5.js"type="text/javascript"></script>
<scriptsrc="tipswindown.js"type="text/javascript"></script>
<scripttype="text/javascript">$(function() {
$("#imgTest").click(function() {
tipsWindown("标题:风景","img:"+this.src,"640","480","true","","true","img");
});/*function tipsWindown(title, content, width, height, drag, time, showbg, cssName)
title: 窗口标题
content: 内容(可选内容为){ text | id | img | url | iframe }
width: 内容宽度
height: 内容高度
drag: 是否可以拖动(ture为是,false为否)
time: 自动关闭等待的时间,为空是则不自动关闭
showbg: [可选参数]设置是否显示遮罩层(0为不显示,1为显示)
cssName: [可选参数]附加class名称*/});</script>
</head>
<body>
<imgsrc="../Contents/Images/wallpager/Autumn_A_1.jpg"width="400"height="300"id="imgTest"/>
</body>
</html>
其它用法网友总结如下:
1.弹出文本信息提示:
tipsWindown("提示","text:提示信息内容","250","150","true","","true","msg")
2.弹出页面中的某个ID的html:
tipsWindown("标题","id:testID","300","200","true","","true","id")
3.弹出图片:
tipsWindown("图片","img:图片路径","250","150","true","","true","img")
4.get加载一个.html文件(也可以是.php/.asp?id=4之类的):
tipsWindown("标题","url:get?test.html","250","150","true","","true","text");
5.加载一个页面到框架显示:
tipsWindown("标题","iframe:http://leotheme.cn","900","580","true","","true","leotheme");
6.弹出一个不能拖动且没有遮罩背景的文本信息层:
tipsWindown("提示","text:提示信息内容","250","150","false","","false","msg")
7.弹出一个不能拖动,三秒钟自动关闭的层:
tipsWindown("提示","text:提示信息内容","250","150","false","3000","true","msg")
1、下载本文示例
2、下载官方最新示例与框架(推荐)
官网:http://leotheme.cn/javascript/jquery-plugins-tipswindow-2-0.html
转载于:https://www.cnblogs.com/best/archive/2011/09/27/2193572.html
弹出层之3:JQuery.tipswindow相关推荐
- Lightbox弹出层插件:jQuery弹出层插件用法
插件描述:这款lightbox,可应用于图片.swf文件.html文件等等. Lightbox弹出层插件 说明文档 : 1.引入资源,(JQ1.3+)和JS文件: <script type=& ...
- 使用jquery的blockui插件显示弹出层
使用jquery的blockui插件显示弹出层 Posted on 2011-04-14 16:34 孤独者 阅读(9975) 评论(0) 编辑 收藏 在做网站的开发过程中,可能需要使用弹出层,使用j ...
- jquery 弹出层插件
最近在研究弹出层插件时发现网上很多插件功能很强大,同时插件也很庞大.在这里个人写了一个比较秀珍的弹出层插件. jquery.popdialog.js $(function () {$.fn.PopDi ...
- 弹出层blockui插件主要使用blockUI和unblockUI两个方法来控制弹出层的显示或者隐藏
https://blog.csdn.net/echocdzh/article/details/50294353 在做网站的开发过程中,可能需要使用弹出层,使用jquery的blockui插件可以很轻松 ...
- 分享123个JS特效弹出层,总有一款适合您
分享123个JS特效弹出层,总有一款适合您 123个JS特效弹出层下载链接:https://pan.baidu.com/s/1mH0heedscCrBmft_zOjjwA?pwd=n4eo 提取码: ...
- Jquery 点击图片在弹出层显示大图
[转]Jquery 点击图片在弹出层显示大图 使用jquery, 实现点击图片在弹出层显示大图,再次点击关闭,加入图片高宽和窗口高宽的大小判断. 效果图片: 1.点击前的效果: 2.点击后的效果: h ...
- 弹出层之2:JQuery.BlockUI
JQuery.BlockUI是众多JQuery插件弹出层中的一个,它小巧(原版16k,压缩后10左右),容易使用, 功能齐全,支持Iframe,支持Modal,可定制性高也意味他默认谦虚的外表. jQ ...
- 一款基于jQuery外观优雅带遮罩弹出层对话框
今天我们要来分享一款基于jQuery的弹出层对话框插件,该插件包含多种对话框类型,比如提示框.确认框等.更为实用的是,这款jQuery对话框中的按钮事件也可以被我们所捕获,从而相应对话框按钮的各种事件 ...
- JQuery弹出层,点击按钮后弹出遮罩层,有关闭按钮
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- [置顶] 推荐一款好用的jquery弹出层插件——wbox
在我们做项目的过程中难免会让弹出层来展示一些信息,这里推荐一款比较不错的jquery插件,下面说一下特点和新版本增加的功能 wBox特点 背景透明度可以根据实际情况进行调节 可以根据需要添加wBox标 ...
最新文章
- flex中toolTip汇总
- 【深度学习】CNN神经网络应用(用于亚洲大黄蜂分类)
- 【Flutter】开发 Flutter 包和插件 ( 开发 Dart 插件包 | 发布 Dart 插件包 )
- 停车场计费算法 php,停车场收费算法,思路卡住了求补完!该如何处理
- 【深度学习】动漫风格迁移AnimeGANv2,发布线上运行Demo
- Windbg教程-调试非托管程序的基本命令上
- UltraESB的首选IDE – IntelliJ IDEA
- NOI数据结构:主席树
- Spring Boot 集成 Elasticsearch 实战
- struts2中Action名称的搜索顺序
- 软考信息安全工程师考试历年真题汇总及试题分布统计
- 举例让抽象问题具体化:二叉搜索树的后序遍历序列
- 马云创造的就业机会多还是毁掉的就业机会多?
- Ace Admin前端框架笔记二导航栏Navba
- 编程到底难在哪里?—— 《人月神话》阅读分享
- 网易buff服务器不稳定,《梦幻西游》手游平民94方寸逆袭成神分享心得助你腾飞_
《梦幻西游》手游官网-人人都玩,无处不在...
- 微软苏州校招笔试(2016.12):#1091 : Clicker
- 网络故障排查简单思路(思路见目录)
- windows11设置chrome谷歌浏览器为默认浏览器
- 请用一句话证明你是程序员
热门文章
- 在Angular外部使用js调用Angular控制器中提供的函数方法或变量
- 解决navicat连接不上mysql8
- 计算机硬盘必内存的容量大,电脑基础知识:内存条的作用
- ora使用动态sql给变量赋值
- android 调出键盘表情_Android--如何优雅的切换表情和键盘(原理)
- python lambda表达式及用法_Python中lambda表达式的常见用法
- java砖头铺路面试题,Java基础知识面试题
- Node.js:POST请求、文件上传
- Cesium:改变地球背景
- java的if判读_java if判断