前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >弹出层之3:JQuery.tipswindow

弹出层之3:JQuery.tipswindow

作者头像
张果
发布2022-05-09 19:44:54
3.1K0
发布2022-05-09 19:44:54
举报
文章被收录于专栏:软件开发

tipswindow是一个很一般的JQuery弹出层插件,但使用简单,有相对漂亮的外观,代码比较通俗。下面介绍使用方法:

1、首先引入该插件相关文件,分别是样式,JQuery库,该插件

代码语言:javascript
复制
<link href="tipswindown.css" rel="stylesheet" type="text/css" />
    <script src="../Contents/JS/jquery-1.5.js" type="text/javascript"></script>
    <script src="tipswindown.js" type="text/javascript"></script>

2、修改tipswindow.css文件中图片的路径,默认与css文件在同一个目录下。 3、编写代码,如在图片上设置单击事件后放大显示图片:

代码语言:javascript
复制
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link href="tipswindown.css" rel="stylesheet" type="text/css" />
    <script src="../Contents/JS/jquery-1.5.js" type="text/javascript"></script>
    <script src="tipswindown.js" type="text/javascript"></script>
    <script type="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>
    <img src="../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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2011-09-27,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档