`
mowengaobo
  • 浏览: 161373 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

JQuery弹出层效果制作

阅读更多

JQuery弹出层效果制作

2010-09-17

JQuery插件TipsWindown 1.1

一个基于jQuery的弹出层。支持拖拽,支持内容为文字,图片,URL等!至于兼容性。在IE6下,弹出对像无法绝对固定。其他应该没啥大问题;

最新更新:(2010-08-12):修正IE6下不能遮住下拉菜单的BUG,增加拖动时半透明效果。

应用演示

  1. 弹出文本信息提示:
    我是下拉菜单
    tipsWindown("提示","text:提示信息内容","250","150","true","","true","msg")
    点击我弹出提示
  2. 弹出页面中的某个ID的html:
    tipsWindown("标题","id:testID","300","200","true","","true","id")
    点击我弹出提示

    我是测试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://www.nowamagic.net","900","580","true","","true","leotheme");
    点击我弹出提示
  6. 弹出一个不能拖动且没有遮罩背景的文本信息层:
    tipsWindown("提示","text:提示信息内容","250","150","false","","false","msg")
    点击我弹出提示
  7. 弹出一个不能拖动,三秒钟自动关闭的层:
    tipsWindown("提示","text:提示信息内容","250","150","false","3000","true","msg")
    点击我弹出提示

参数说明

顺序 参数 功能 备注 1 title 2 content 3 width 4 height 5 drag 6 time 7 showbg 8 cssName
弹出层的标题 必填,纯文本
弹出层的内容 text 文本内容
id 页面里某id的子标签
img 图片
url get或post某一页面里的html,该页面要求只包含body的子标签
iframe 目标地址在框架显示
弹出层的宽 必填,比如“200”。(不需要带px)
弹出层的高 同 width
是否可拖动 必填,可选参数(true,false)
自动消失时间 可不填,默认不自动关闭;参数可为空("")
是否显示遮罩层 可不填,默认不显示(此项如填了,它前面的time也必须要填)
弹出层附加样式名 可不填

像这种弹出透明背景层效果很常见了,除部分区域可以操作外其他区域不能操作,目前有提供插件,完全可以实现此种效果。

查看本页源代码可获取所有所需的代码。

分享到:
评论

相关推荐

    jquery弹出层插件

    jquery弹出层插件制作注册表单点击按钮弹出层表单提交效果,可支持拖动的jQuery弹出层效果。标题、高度、宽度等可以自定义弹出层插件。jQuery插件

    jquery弹出层特效

    jquery弹出层特效animate制作类似flash动画效果弹出层

    jQuery制作多种弹出层效果代码.zip

    jQuery制作多种弹出层效果代码是一款基于Drop.js插件实现的下拉弹出层特效。

    大气绿色jQuery弹出框弹出层特效代码.zip

    实现效果: ...大气绿色jQuery弹出框弹出层特效代码,支持三种弹出对话框模式,即提示信息、confirm确认、 alert提示三种弹框模式,特效代码基于jQuery实现,很不错的对话框,相比ArtDialog功能弱了点。效。

    jQuery弹出层窗口插件popupWindow.js

    popupWindow.js是一款jQuery弹出层窗口插件。该插件能够轻松的制作弹出层模态窗口效果。弹出的窗口支持最大化、最小化、拖拽、改变尺寸等功能。

    jQuery点击事件遮罩弹出层可移动特效代码.zip

    "jQuery点击事件遮罩弹出层可移动特效代码下载。一款jquery弹出层插件制作注册表单点击按钮弹出层表单提交效果,可支持拖到的jQuery弹出层效果。标题、高度、宽度等可以自定义弹出层js插件。

    【原创】jquery弹出层拖拽插件

    本人制作的jquery弹出层拖拽插件JDragUI 功能: 1、弹出浮动层(带或不带遮盖,及是否挡住整个页面只显示层) 2、支持层拖拽(拖拽时可增加虚影效果,同时完善用户体验,层只会在浏览器范围你拖拽) (压缩包中有...

    js实现的弹出层效果

    js实现的弹出层效果,无需jquery库支持

    jquery响应式弹出层图片画廊插件.zip

    该弹出层图片画廊可以将页面中所有带相同class类的图片制作为一个无限循环的旋转木马效果。它的特点还有: 完全响应式。 通过图片的alt标签来设置标题。 可以控制图片的滑动时间间隔。 可以显示/隐藏前后导航...

    jQuery弹出层效果代码

    jQuery弹出层效果代码是一款基于jquery-1.4.2.min.js和popup_layer.js插件制作的DIV弹出层网页代码,体积小,功能强大,有鼠标经过、鼠标点击等共9种弹出层效果代码。代码附带详细中文注释,供大家参考。

    jQuery制作多种弹出层效果特效代码

    jQuery制作多种弹出层效果代码是一款基于Drop.js插件实现的下拉弹出层特效。

    jquery响应式弹出层图片画廊插件

    tekitizy_carousel是一款jquery响应式弹出层图片画廊插件。该弹出层图片画廊可以将页面中所有带相同class类的图片制作为一个无限循环的旋转木马效果。

    jQuery简洁遮罩弹出层代码.rar

    jQuery简洁遮罩弹出层代码基于jquery-1.7.2.min.js制作,使用非常简单,就两个标签,里面自定义内容和样式,四种常见效果,懂的朋友还可以修改源代码修改成自己想要的效果。

    jQuery简洁遮罩弹出层代码.zip

    jQuery简洁遮罩弹出层代码基于jquery-1.7.2.min.js制作,使用非常简单,就两个标签,里面自定义内容和样式,四种常见效果,懂的朋友还可以修改源代码修改成自己想要的效果。

    jQuery手机自定义确认提示框代码.zip

    jQuery手机自定义确认提示框代码是一款手机弹窗提示框,自定义弹窗内容,居左对齐显示,告知需要确认的信息等效果代码。

    使用jQuery制作遮罩层弹出效果的极简实例分享

    主要介绍了使用jQuery制作遮罩层弹出效果的极简实例分享,效果中背景为半透冥且不可操作,在制作页面上传功能等场景下十分实用,需要的朋友可以参考下

    jquery制作漂亮的弹出层提示消息特效

    今天给大家带来一款基于jquery超炫的弹出层提示消息。这款实例页面初始时,一个go按钮。当单击go按钮时,提示强出层以动画形式出现。效果图如下: 实现的代码。 html代码: 代码如下:  ’b’>    ’bb’>    ...

    jQuery点击弹出全屏广告代码.zip

    jQuery点击弹出全屏广告代码是一款jQuery调用cookie函数制作全屏遮罩层广告图片上拉滑动隐藏效果代码。

    Drop.js-实用的JavaScript下拉弹出层插件

    Drop.js是一款JavaScript和CSS实用下拉弹出层插件。该插件基于Tether.js来定位弹出层,可以制作多种弹出层效果。

Global site tag (gtag.js) - Google Analytics