`
mowengaobo
  • 浏览: 164168 次
  • 性别: 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弹出层效果网页特效.zip

    在网页设计和开发中,jQuery弹出层效果是不可或缺的一部分,尤其在构建用户交互丰富的前端应用时。这个“大前端jQuery弹出层效果 大前端网站jQuery弹出层效果网页特效.zip”压缩包中,包含了实现这些效果的相关资源...

    jquery弹出层背景变暗

    "jQuery弹出层背景变暗"这个话题涉及到在使用jQuery时,如何创建一个具有半透明暗色背景的弹出层(也称为对话框或模态窗口),以突出显示弹出内容并降低页面其他部分的视觉干扰。 首先,我们需要理解jQuery弹出层的...

    漂亮的jquery 弹出层

    标题中的“漂亮的jquery 弹出层”指的是使用jQuery库实现的一种视觉效果良好的弹出窗口功能。在网页设计中,弹出层(也称为模态窗口或对话框)是一种常见的交互元素,用于显示额外的信息、提示用户操作或者进行表单...

    Jquery弹出层时尚特效10种

    【jQuery弹出层时尚特效10种】 在Web开发中,弹出层(Modal)是一种常用的交互元素,它能够在用户不离开当前页面的情况下显示额外的信息或功能。jQuery库以其强大的DOM操作和事件处理能力,为创建弹出层特效提供了...

    jquery 弹出层

    总之,jQuery 的弹出层功能极大地丰富了网页的交互性,而 GreyBox 是一个强大的工具,可以帮助开发者轻松实现高质量的弹出窗口效果。通过熟练掌握 GreyBox 的使用,我们可以为用户提供更加优雅且功能丰富的网页体验...

    jquery 弹出层插件下载(简单、易用)

    首先,让我们深入了解一下jQuery弹出层插件的基本概念。弹出层通常包括模态对话框和非模态对话框两种类型。模态对话框会阻止用户与页面其他部分的交互,直到弹出层被关闭;而非模态对话框则允许用户在不关闭弹出层的...

    jquery colorbox弹出层插件制作图片弹出显示代码

    总的来说,jQuery Colorbox插件提供了丰富的功能和灵活性,可以帮助开发者轻松创建出具有专业级别的弹出层效果。通过理解其基本用法和选项设置,我们可以根据项目需求定制出理想的图片弹出显示效果。在实际应用中,...

    jquery插件库-jquery弹出层 三种弹出效果.zip

    本资源"jquery插件库-jquery弹出层 三种弹出效果.zip"聚焦于jQuery的一个特定应用:弹出层效果。下面我们将详细探讨jQuery弹出层的原理、实现方式以及三种不同的弹出效果。 1. jQuery弹出层基础 jQuery弹出层,通常...

    jQuery点击弹出层带关闭按钮的淡出淡进滑动弹出层效果

    <title>jQuery弹出层示例 #popup { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; padding: 20px; border: 1px solid #ccc; box-...

    jQuery 弹出浮动层兼容各种浏览器

    - `clickIt.html`和`htmliframe.html`: 这些可能是演示或测试弹出层效果的HTML文件,可能包含触发弹出层显示的代码。 - `jquery.1.4.2.min.js`: 这是jQuery库的版本1.4.2,用于实现弹出层的JavaScript逻辑。 - `...

    很实用的 jQuery鼠标经过弹出层效果

    "很实用的jQuery鼠标经过弹出层效果"是一个常见的交互设计功能,通常用于提供信息提示或者增强用户体验。这个效果允许当用户将鼠标悬停在某个元素上时,一个浮动的层(通常称为“弹出层”或“气泡提示”)会显示相关...

    JQuery实战视频教程___弹出层效果

    【jQuery实战视频教程——弹出层效果】 在Web开发中,弹出层(Modal)是一种常见且实用的设计元素,用于显示重要信息、用户确认或提供附加功能。本篇教程将聚焦于使用jQuery实现弹出层效果,这在交互式网页设计中是...

    jquery登录弹出层

    首先,我们要理解jQuery弹出层的基本原理。通常,弹出层是通过CSS定位和JavaScript控制显示与隐藏来实现的。在jQuery中,我们可以利用`.show()`和`.hide()`方法来控制元素的可见性,而`.fadeIn()`和`.fadeOut()`则...

    jquery弹出层超经典

    "jquery弹出层超经典"这个压缩包文件显然包含了与使用jQuery实现弹出层效果相关的代码和资源,这些弹出层可能包含了各种不同的设计样式和交互效果,适合开发者用于学习和应用到自己的项目中。 首先,我们要理解“弹...

    jquery弹出层插件点击弹出层可拖动,弹出层为umeditor

    在IT领域,尤其是在Web开发中,我们经常遇到各种交互式设计和组件的实现,其中“jQuery弹出层插件点击弹出层可拖动,弹出层为umeditor”就是一个典型的例子。这个功能结合了多个技术,包括jQuery、CSS、iframe以及...

    jQuery弹出层网页特效

    关于压缩包文件"texiao859_1560681003",它可能包含了实现jQuery弹出层效果的HTML、CSS和JavaScript文件。解压后,应查看index.html(或其他主文件)了解整个效果的结构;查看CSS文件(如style.css)理解样式设置;...

    css3 jquery 弹出层实现漂亮的弹出层

    在本教程中,我们将深入探讨如何利用CSS3和jQuery来创建一个既美观又功能丰富的弹出层。 首先,让我们了解一下CSS3。CSS3是层叠样式表的最新版本,引入了许多新的特性和功能,例如选择器增强、边框和背景的更多控制...

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

    在本文中,我们将深入探讨如何使用jQuery来创建各种弹出层效果,特别是在结合Drop.js插件的情况下。jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画以及Ajax交互,使得创建复杂的用户界面变得...

    Jquery弹出层

    在IT行业中,jQuery是一...总的来说,"Jquery弹出层"涉及到的知识点包括jQuery的选择器、DOM操作、事件处理、动画效果以及Ajax交互。通过熟练掌握这些技能,开发者可以创建出丰富的用户界面,提供更佳的网页交互体验。

    jquery弹出层并可拖动

    要创建一个jQuery弹出层,我们需要以下步骤: 1. **HTML结构**:在HTML文件中,定义弹出层的基本结构,包括一个容器元素(如`div`)用于包含弹出层的内容,以及可能的关闭按钮。例如: ```html 弹出层标题 ...

Global site tag (gtag.js) - Google Analytics