`
wanly3643
  • 浏览: 23551 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

12个ajax弹出层效果js代码(转载)

    博客分类:
  • Web
阅读更多
Thickbox – 基于 jQuery,支持 AJAX,轻量级的而且比较高效。支持图片与HTML内容。大小约为 40k,目前还可作为 WordPress 的插件使用。这个js的优点在于与,父级的原页面滚动条随鼠标滚动的时候,弹出的层并不移动,而始终处于浏览器的固定位置。




GreyBox – 创建 iframe 的弹出界面,可使用图片、HTML 及 URL,大小约为 20k。

这个弹出层效果有固定位置与随父级的滚动条滚动两种模式。



GreyBox Redux – 基于 jQuery,比 GreyBox 更轻。

这个js的的弹出效果增加了自上而下缓慢滑出的效果。


Lightbox v2.0 – 最初是为了显示图片设计的,使用了 prototype 和 sciptaculous,所以有些沉重,但对于图片来说很好用。

缺点就是弹出层出来后,滚动鼠标滚轮,父级页面与弹出内容同事随着滚动条,只有点击关闭按钮才能关闭弹出层,对于弹出图片较大的时候,用户体验方面相对比较不友好,需要移动页面找到关闭按钮才行。

Lightbox Gone Wild – modal 模式窗口的 lightbox,可使用 html、表单及图片,也是基于 prototype 的。

这个效果的好处在于,弹出内容是图片时,点击图片本身既可以关闭弹出层,非常方便。


Multi-faceted LIghtbox – 又一个基于 prototype 的,不过这个为各种可用于 lightbox 的数据类型提供了选项。

Leightbox – 和 Lightbox Gone Wild 很相似,只是 Leightbox 以 html 方式存放内容,所以可以被搜索引擎索引到。

除了弹出内容符合seo以外,这个效果的一大特点是,弹出后父级页面的滚动被禁用,而以弹出层的滚动为主,这样在弹出的窗口有较多内容时,滚动鼠标滚轮时,就不会同时滚动父级页面,而影响正常浏览。


xilinus – 使用简单,基于 prototype,很容易定制,可使用多种内容选项。

Lightbox Plus – 可以自动根据窗口的大小缩放图片。

Suckerfish Hover Lighbox – 和传统的 lightbox 不一样,它在打开 lightbox 的时候,还可以点击访问页面上的其它元素。

Litebox – 这是 Lightbox 的另一个版本,代码量减少了,使用了 moo.fx 和 prototype-lite,如果页面需要减肥的话,可以选择这个。

LITBox – 使用类写的 lightbox,所以可以创建多个对象实例,并且单独进行控制。基于 Thickbox。
分享到:
评论

相关推荐

    Ajax加载外部页面的一个弹出层效果 ajax实现弹出层

    Ajax加载外部页面的一个弹出层效果 ajax实现弹出层 简单实用

    Ajax实现弹出层...

    在实际开发中,为了提高代码复用性和可维护性,我们通常会封装这些功能成一个通用的Ajax弹出层组件,允许传入不同的参数,如请求URL、数据、回调函数等。 文件“Messaging”可能与这个话题有关,因为弹出层在消息...

    JS弹出层,js弹出DIV效果源码下载

    本资源提供的"JS弹出层,js弹出DIV效果源码下载"是一个运用JQUERY库实现的此类效果。 jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。jQuery的核心特性包括选择器、DOM...

    jquery特效插件弹出层ajax弹出层

    jquery特效插件FancyBox弹出层支持多种方式弹出层如:图片弹出层、文字信息弹出层、flash弹出层、ajax弹出层、Iframe弹出层。 支持。 IE6 IE7 IE8及以上 Firefox

    jQuery实现的AJAX简单弹出层效果代码

    在深入讨论jQuery实现的AJAX简单弹出层效果代码之前,首先要了解什么是AJAX以及jQuery是什么。 AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个页面的情况下,能够更新部分网页的技术。通过在...

    [WEB开源]弹出层效果

    开源的弹出层效果意味着开发者可以免费获取并使用这些代码,同时也能够查看和修改源代码以适应自己的项目需求。开源项目通常具有良好的文档支持和社区活跃度,可以帮助开发者快速理解和集成弹出层功能,同时也能享受...

    原生js tinybox.js弹出层插件支持ajax弹出层放大缩小

    原生js tinybox.js弹出层插件支持ajax弹出层放大缩小 原生js tinybox.js弹出层插件支持ajax弹出层放大缩小 原生js tinybox.js弹出层插件支持ajax弹出层放大缩小

    Ajax 提交弹出层源码

    在这个“Ajax 提交弹出层源码”中,我们将探讨如何结合Ajax与弹出层来实现一个动态、交互的功能。 首先,让我们理解弹出层的概念。弹出层通常指的是在网页上弹出的一个模态或非模态的窗口,用于显示额外的信息或者...

    弹出层效果(源代码)

    此外,弹出层效果还可以通过AJAX技术动态加载内容,实现更丰富的功能,如异步表单提交、图片预览等。 通过学习这个实例,开发者不仅可以掌握弹出层效果的实现,还能了解到前端开发中的基本技术和原理,这对于提高...

    jQuery顶部浮动弹出层动画弹出层特效

    在"jQuery顶部浮动弹出层动画弹出层特效"这个主题中,我们将深入探讨如何利用jQuery来创建动态、吸引人的弹出层效果,特别是在页面顶部浮动的设计。 首先,让我们了解什么是弹出层。弹出层是一种网页设计技术,它...

    DZ论坛弹出层效果

    在DZ论坛的弹出层效果中,我们还可以看到一些高级特性,比如AJAX技术的运用,使得弹出层内容可以动态加载,提高用户体验。此外,通过jQuery或其他JavaScript库,可以更方便地处理事件绑定和动画效果。 总结起来,DZ...

    javascript弹出层表单提交代码

    综上所述,实现"javascript弹出层表单提交代码"涉及到了JavaScript的基础知识,如DOM操作、事件处理、异步通信,以及一些高级技巧,如使用第三方库提高开发效率。同时,良好的用户体验和数据验证也是不可忽视的部分...

    jquery弹出层特效

    4. `jquery.layerModel.js`:这是一个自定义的jQuery插件,可能包含了弹出层的逻辑代码,包括如何显示和隐藏弹出层,以及如何处理Ajax请求和响应。 5. `视频教程大全.url`、`电子书大全.url`、`更多给力作品.url`:...

    jQuery手机端点击弹出层选取时间代码

    6. **关闭弹出层**:用户完成选择后,需要提供关闭弹出层的机制,可以是一个“确定”按钮或者点击弹出层外部区域。使用`jQuery`的`.hide()`方法来隐藏弹出层。 ```javascript $("#popupLayer .closeBtn").click...

    JS弹出层效果,可以弹出图片等

    "JS弹出层效果,可以弹出图片等"这个主题主要涉及到JavaScript技术以及如何利用它来创建具有视觉吸引力的用户体验。 Light Window是一个流行的JavaScript库,特别设计用来实现弹出层效果。在这个例子中,我们讨论的...

    Ajax弹出框效果(背景全黑)

    标题提到的“Ajax 弹出框效果(背景全黑)”显然是一个具有黑色背景的弹出对话框,这种设计通常可以提供更好的视觉焦点,使用户更专注于弹出框内的内容。 Ajax,全称Asynchronous JavaScript and XML(异步...

    js弹出层 城市切换效果

    在“js弹出层城市切换效果”这个主题中,我们将深入探讨如何利用JavaScript技术创建一个弹出的城市选择窗口,并实现平滑的城市切换效果。 首先,弹出层通常指的是在网页上动态显示或隐藏的元素,如模态框、提示框或...

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

    而Drop.js则是一个强大的下拉菜单插件,可以用于构建具有弹出层效果的交互式组件。 首先,我们来理解jQuery的基本概念。jQuery的核心功能包括选择器(用于选取DOM元素)、DOM操作(如添加、删除、修改元素)和事件...

    .net中弹出层显示效果

    在.NET开发中,弹出层通常用于在用户与网页...通过以上步骤,你可以实现一个在.NET中弹出层显示效果,包括多层显示、图文混排等功能。当然,实际应用中可能还需要考虑响应式设计,确保在不同设备上都有良好的显示效果。

    AJAX弹出提示信息效果

    本文将详细介绍一个具体的AJAX弹出提示信息效果案例,包括其实现原理、HTML结构、CSS样式以及JavaScript代码分析。 #### 二、HTML结构 该示例中主要包含两个关键元素:`#massage_box` 和 `#mask`。 1. **`#...

Global site tag (gtag.js) - Google Analytics