基于jquery简单的遮罩层overlay小插件

最新推荐文章于 2024-03-15 00:15:00 发布
最新推荐文章于 2024-03-15 00:15:00 发布
阅读量2.1k 收藏
点赞数
分类专栏： Javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhailulu/article/details/8778318
版权

基于jquery简单的遮罩层overlay小插件

上网看见一网友用js写了一个简单的小插件，自己没动手写过。于是打算练练手，用jquery写一个！嘻嘻

写的不好，不要见怪。花了大概两个小时。有bug可有留言告诉我！

效果图：

 

原文：http://www.yrzhll.com

Demo:

http://www.yrzhll.com/example/overlay.html


zhailulu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery loading（遮罩）插件
07-20
jQuery Loading插件用于当DOM元素加载或变化期间，对其进行遮挡阻止用户操作并告知有些后台任务还在进行。实现“正在加载中…”的效果。整个插件只有1kb左右。效果跟extjs遮罩（锁屏）效果基本一样。
jQuery遮罩层插件
weixin_33725270的博客
06-05 105
在网页上常常遇到须要等待非常久的操作，比方导出报表等。为了预防用户点击其它操作或者多次点击同个功能，须要用遮罩层把页面或者操作区盖住。防止用户进行下一步操作。同一时候能够提高界面友好度，让用户知道操作正在运行。 $.fn.extend({ /** * 给元素加入遮罩层 * @param message {String} [可选]遮罩层显示内容 */ mask: fu...
Jquery遮罩插件，想罩哪就罩哪！
子弹头zdt的专栏
10-29 558
一  前言     在项目开发时发现没有一个用起来 爽一点的遮罩插件，看起来觉得不难 好吧那就利用空闲时间，自己折腾一个吧，也好把jquery再温习一下， 需要的功能如下 　　1 可以全屏遮 用于提交数据时 　　2  局部遮，用于重复提交，只遮提交按钮，此功能当时在CSDN的登录中看到过，当时觉得还不错       3  遮罩上的提示文字可自己配置，因为操作的业务场景不一样，提示的信息肯
遮罩层模态框插件实现思路（jQuery）
weixin_30649641的博客
10-21 130
1.遮罩层使用JS写入，DOM渲染完毕后初始化插件； 2.为实现同一页面多次调用，每次呼出时为遮罩层分配一个ID，模态框内容采用动态写入的方式，关闭模态框时将遮罩层初始化； 3.模态框主要分为三种类型，类alert、类confirm、类prompt（按钮：确定/取消）； 4.在此思路基础上可继续根据模态框内容继续分类，完全格式化模态框； 5.其他参数，例如窗体大小，是否...
使用jQuery制作Web页面遮罩层插件的实例教程
10-22
使用jQuery来制作一个Web页面遮罩层插件是一个很好的选择，因为它具有简单易学、使用广泛的特点。 首先，遮罩层通常是一个半透明的覆盖层，它可以用来提示用户页面正在处理某些事情，并防止用户对页面进行其他操作...
jquery-popup-overlay:用于 jquery-popup-overlay js 库的 Meteor 包装包
06-11
而jQuery Popup Overlay是一款基于jQuery的插件，专用于创建弹出层、对话框或者模态窗口。这款插件为网页增添了许多交互性和用户体验。当我们将jQuery Popup Overlay与Meteor框架结合时，可以利用Meteor的强大功能，...
jquery-overlay:〔前端基础组件〕全局遮罩
07-06
jQuery-Overlay是一款基于jQuery库的轻量级插件，旨在快速构建具有遮罩效果的弹出层。它提供了基本的配置选项和事件处理，使得开发者可以轻松地将遮罩功能集成到项目中。由于其依赖于jQuery，因此在使用前需确保页面...
jQuery基于jQueryModal.js插件实现的多款实用的弹出层效果源码.zip
11-18
jQueryModal.js是jQuery的一个插件，专门用于创建弹出层或模态对话框，它提供了多种功能和自定义选项，使得在网页上实现各种弹出效果变得非常简单。 基于jQueryModal.js插件的弹出层效果源码，可以让我们快速地在...
Jquery简单的弹出层带遮罩插件
09-11
Jquery简单的弹出层带遮罩插件本文由梦三秋于2011年01月07日 23：00作成 jquery代码 $("#test1").click(function(){ $('#login').skygqbox(); }); -------------------------------------------------------------------------------- jquery代码 $("#autoClose").click(function(){ var message = "不好意思呀！我来也匆匆去也匆匆，实在太忙了，有太多的东西要学习了，像Jquery、Jquery插件、Wordpress插件、PHP啦，都要学呀，哥没空老是在这杵着呢!两秒后闪人！别想念哥呀！"; $(message).skygqbox({autoClose:2000}); }); -------------------------------------------------------------------------------- jquery代码 $("#right_top").click(function(){ $('#login').skygqbox({position:"right_top"}); }); -------------------------------------------------------------------------------- jquery代码 $("#right_middle").click(function(){ $('#login').skygqbox({position:"right_middle"}); }); -------------------------------------------------------------------------------- jquery代码 $("#right_bottom").click(function(){ $('#login').skygqbox({position:"right_bottom"}); }); -------------------------------------------------------------------------------- jquery代码 $("#top_middle").click(function(){ $('#login').skygqbox({position:"top_middle"}); }); -------------------------------------------------------------------------------- jquery代码 $("#left_top").click(function(){ $('#login').skygqbox({position:"left_top"}); }); -------------------------------------------------------------------------------- jquery代码 $("#left_middle").click(function(){ $('#login').skygqbox({position:"left_middle"}); }); -------------------------------------------------------------------------------- jquery代码 $("#left_bottom").click(function(){ $('#login').skygqbox({position:"left_bottom"}); }); -------------------------------------------------------------------------------- jquery代码 $("#bottom_middle").click(function(){ $('#login').skygqbox({position:"bottom_middle"}); });
Jquery 遮罩层插件
weixin_33845881的博客
11-05 99
(function ($) { $.fn.ShowMask = function (options) { var defaults = { top: 150, left: 200 } var options = $.extend(defaults, options); ...
jquery遮罩层插件
chili3303的博客
02-01 215
(function($){ $.fn.showOverlay=function(options){ /*默认配置*/ vardefaults={'switchModel':'click','opacity':'0.5','backgroundColor':'grey'...
Jquery 遮盖层插件 jquery blockui
z69183787的专栏
09-06 1695
http://www.malsup.com/jquery/block/#page
jquery 遮罩插件 Simple Overlay
赶路人儿
05-14 2480
轻量级的jQuery遮罩层插件-Simple Overlay，当我们需要遮挡住某个HTML元素或者要吸引用户的注意时就会用到遮罩层。 这是个轻量级并且兼容性强的插件，用到了jQuery的淡入淡出效果来显示遮罩。插件也具有很高的可定制性，用户可自定义颜色、透明度等。 如何使用 首先要加载jQuery库和Overlay插件 然后在HTML页面中添加任意网
【前端插件】jQuery遮罩层插件Simple Overlay
小拾一的博客
06-01 630
链接：https://pan.baidu.com/s/1jGxxE1f1DeKbEl5oSyFMXQ 密码：p46w 【软件名称】 jQuery遮罩层插件Simple Overlay【软件描述】Simple Overlay 是一个轻量级的jQuery遮罩层插件， 当我们需要遮挡住某个HTML元素或者要吸引用户的注意时就会用到遮罩层。 在学习中有不懂迷茫的童鞋们可以加...
JqueryUI插件dialog实现遮罩层
u013562120的博客
01-19 1187
1、 首先，我们要新建一个JSP页面，在JSP页面中要引入相应的jQueryUI插件以及相应的CSS样式文件。如下： 2、 我们要实现页面显示的效果。代码如下： [html] view plaincopyprint? 对话框的遮罩效果 Open Dialog 你...
「jQuery系列」jQuery插件介绍（遮挡面板Accordion、根据输入内容过滤/补全Autocomplete）
最新发布
日常笔记/总结/系列知识梳理
03-15 840
jQuery Accordion是一个功能强大的jQuery UI插件，它可以将一组面板（或称为选项卡）组织成可折叠的形式。每个面板包含一个标题（header）和对应的内容（content），用户可以通过点击标题来展开或收起相应的内容。这种交互方式有助于节省页面空间，同时使得信息展示更加有序和直观。可折叠面板：用户可以通过点击标题来展开或收起面板，实现内容的动态展示。自动管理状态：当一个面板被展开时，其他面板会自动收起，确保一次只展示一个面板的内容。丰富的配置选项。
jQuery实现遮罩层的不同样式和效果
jQuery实现简单的遮罩层 jQuery 是一个功能强大且广泛使用的 JavaScript 库，它提供了许多有用的功能，可以帮助开发者快速构建 Web 应用程序。其中，jQuery 实现遮罩层是开发者经常遇到的一个问题。本文将讲解如何...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值