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

最新推荐文章于 2024-03-15 00:15:00 发布
最新推荐文章于 2024-03-15 00:15:00 发布 · 207 阅读 · 0
文章标签：

#javascript #ViewUI

本文介绍了一款使用jQuery实现的简易遮罩层插件。该插件为作者自行练习编写，旨在提供一种轻量级的遮罩层解决方案。尽管可能存在一些bug，但适合初学者了解遮罩层的基本原理。

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

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

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

效果图：

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

Demo:

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


iteye_19606
关注
jquery loading（遮罩）插件
07-20
jQuery Loading插件用于当DOM元素加载或变化期间，对其进行遮挡阻止用户操作并告知有些后台任务还在进行。实现“正在加载中…”的效果。整个插件只有1kb左右。效果跟extjs遮罩（锁屏）效果基本一样。
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_33725270的博客
06-05 149
在网页上常常遇到须要等待非常久的操作，比方导出报表等。为了预防用户点击其它操作或者多次点击同个功能，须要用遮罩层把页面或者操作区盖住。防止用户进行下一步操作。同一时候能够提高界面友好度，让用户知道操作正在运行。 $.fn.extend({ /** * 给元素加入遮罩层 * @param message {String} [可选]遮罩层显示内容 */ mask: fu...
Jquery遮罩插件，想罩哪就罩哪！
子弹头zdt的专栏
10-29 623
一  前言     在项目开发时发现没有一个用起来 爽一点的遮罩插件，看起来觉得不难 好吧那就利用空闲时间，自己折腾一个吧，也好把jquery再温习一下， 需要的功能如下 　　1 可以全屏遮 用于提交数据时 　　2  局部遮，用于重复提交，只遮提交按钮，此功能当时在优快云的登录中看到过，当时觉得还不错       3  遮罩上的提示文字可自己配置，因为操作的业务场景不一样，提示的信息肯
遮罩层模态框插件实现思路（jQuery）
weixin_30649641的博客
10-21 180
1.遮罩层使用JS写入，DOM渲染完毕后初始化插件； 2.为实现同一页面多次调用，每次呼出时为遮罩层分配一个ID，模态框内容采用动态写入的方式，关闭模态框时将遮罩层初始化； 3.模态框主要分为三种类型，类alert、类confirm、类prompt（按钮：确定/取消）； 4.在此思路基础上可继续根据模态框内容继续分类，完全格式化模态框； 5.其他参数，例如窗体大小，是否...
轻量级jQuery遮罩层插件Simple Overlay
而描述中提到的“轻量级的jQuery遮罩层插件-Simple Overlay”，进一步明确了其技术定位：一个体积小、性能高、易于集成和使用的JavaScript库，专为解决遮罩层需求而设计。 所谓“遮罩层”，在Web前端领域，指的是...
使用jQuery制作Web页面遮罩层插件的实例教程
10-22
使用jQuery来制作一个Web页面遮罩层插件是一个很好的选择，因为它具有简单易学、使用广泛的特点。 首先，遮罩层通常是一个半透明的覆盖层，它可以用来提示用户页面正在处理某些事情，并防止用户对页面进行其他操作...
基于jQuery的遮罩层点击展开动画弹出框
“非常简单的jQuery遮罩层鼠标点击按钮放大展开动画弹出框”这一前端实现，是一种常见且实用的用户交互设计模式，广泛应用于网页开发中的模态窗口（Modal）场景。该技术结合了HTML结构、CSS样式控制以及jQuery ...
基于jQuery的遮罩弹出层登录注册特效实现
根据文件的【标题】和【描述】，我们可以了解到该压缩包文件涉及的知识点主要集中在前端开发领域，使用了 jQuery 和 Modal Dialog 插件来创建带有遮罩层的模态弹出窗口，专注于实现登录和注册表单的特效。...
基于jQuery的下载等待遮罩层实现
“jQuery下载/等待遮罩层”这一主题涉及的是前端开发中一个非常实用且常见的功能组件——页面加载或异步请求过程中的视觉反馈机制，即“等待遮罩层”（Loading Mask 或 Loading Overlay）。该组件通过在用户执行某些...
jquery插件thickbox遮罩层的的使用
03-01
NULL 博文链接：https://struts2.iteye.com/blog/277279
Jquery 遮罩层插件
weixin_33845881的博客
11-05 143
(function ($) { $.fn.ShowMask = function (options) { var defaults = { top: 150, left: 200 } var options = $.extend(defaults, options); ...
jquery遮罩层插件
chili3303的博客
02-01 273
(function($){ $.fn.showOverlay=function(options){ /*默认配置*/ vardefaults={'switchModel':'click','opacity':'0.5','backgroundColor':'grey'...
Jquery 遮盖层插件 jquery blockui
z69183787的专栏
09-06 1748
http://www.malsup.com/jquery/block/#page
jquery 遮罩插件 Simple Overlay
赶路人儿
05-14 2577
轻量级的jQuery遮罩层插件-Simple Overlay，当我们需要遮挡住某个HTML元素或者要吸引用户的注意时就会用到遮罩层。 这是个轻量级并且兼容性强的插件，用到了jQuery的淡入淡出效果来显示遮罩。插件也具有很高的可定制性，用户可自定义颜色、透明度等。 如何使用 首先要加载jQuery库和Overlay插件 然后在HTML页面中添加任意网
【前端插件】jQuery遮罩层插件Simple Overlay
小拾一的博客
06-01 684
链接：https://pan.baidu.com/s/1jGxxE1f1DeKbEl5oSyFMXQ 密码：p46w 【软件名称】 jQuery遮罩层插件Simple Overlay【软件描述】Simple Overlay 是一个轻量级的jQuery遮罩层插件， 当我们需要遮挡住某个HTML元素或者要吸引用户的注意时就会用到遮罩层。 在学习中有不懂迷茫的童鞋们可以加...
JqueryUI插件dialog实现遮罩层
u013562120的博客
01-19 1272
1、 首先，我们要新建一个JSP页面，在JSP页面中要引入相应的jQueryUI插件以及相应的CSS样式文件。如下： 2、 我们要实现页面显示的效果。代码如下： [html] view plaincopyprint? 对话框的遮罩效果 Open Dialog 你...
「jQuery系列」jQuery插件介绍（遮挡面板Accordion、根据输入内容过滤/补全Autocomplete）
最新发布
日常笔记/总结/系列知识梳理
03-15 1134
jQuery Accordion是一个功能强大的jQuery UI插件，它可以将一组面板（或称为选项卡）组织成可折叠的形式。每个面板包含一个标题（header）和对应的内容（content），用户可以通过点击标题来展开或收起相应的内容。这种交互方式有助于节省页面空间，同时使得信息展示更加有序和直观。可折叠面板：用户可以通过点击标题来展开或收起面板，实现内容的动态展示。自动管理状态：当一个面板被展开时，其他面板会自动收起，确保一次只展示一个面板的内容。丰富的配置选项。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值