jQuery遮罩层插件

【jQuery遮罩层插件】的更多相关文章

在网页上常常遇到须要等待非常久的操作,比方导出报表等.为了预防用户点击其它操作或者多次点击同个功能,须要用遮罩层把页面或者操作区盖住.防止用户进行下一步操作.同一时候能够提高界面友好度,让用户知道操作正在运行. $.fn.extend({ /** * 给元素加入遮罩层 * @param message {String} [可选]遮罩层显示内容 */ mask: function (message) { var $target = this, fixed = false, targetStatic…

jQuery遮罩层登录对话框

用户登录是许多网站必备的功能.有一种方式就是不管在网站的哪个页面,点击登录按钮就会弹出一个遮罩层,显示用户登录的对话框.这用方式比较灵活方便.而现在扫描二维码登录的方式也是很常见,例如QQ.微信.百度等.现在何问起推荐一个带二维码的登录弹出层,可拖动.关闭,有需要的朋友可以参考一下. 体验效果:http://hovertree.com/texiao/jquery/91/ 结尾附有源码下载. 效果图: 代码如下: <!DOCTYPE html> <html lang="zh&qu…

jQuery遮罩层的实现

遮罩层其实就是一个占据整个页面的半透明效果的页面元素,一般用div实现.页面中实现遮罩层,无非就是为了让用户只能操作弹出窗口的内容,而不允许操作弹出窗口外的内容. 在实现时,我使用了两个div,一个遮罩层id=overlay,一个是弹出窗id=dialog. <body> <div id="overlay"></div> <div id="dialog">点击弹出窗可以隐藏遮罩层</div> <a i…

jquery 遮罩层显示img

如果点击iframe中的image显示整个页面的遮罩层,可参考如下: http://blog.csdn.net/shiaijuan1/article/details/70160714 具体思路就是,顶层添加dom对象,用来显示信息,默认隐藏,需要时在iframe中调用,宽高设置为100%. 实现如下: //遮罩层 .showmask { position: fixed;//position设置为fixed或者absolute或者relative,z-index才生效,且z-index值越大越显示…

jquery遮罩层

(function () { //遮罩层实现 zhe zhao ceng kexb 2016.2.24 $.extend($.fn, { mask: function (msg, maskDivClass) { this.unmask(); // 参数 var op = { opacity: 0.8, z: , bgcolor: '#ccc' }; var original = $(document.body); , left: }; ] && ] !== window.document)…

jQuery遮罩层效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Mask</title> <style type="text/css"> *{margin:0;padding:0;} .mask{ position:absolute; left:0; top:0; right:0; botto…

JQuery 遮罩层弹窗

var str = "<div id=\"zhezhao\" style=\"display:none; background-color: rgba(0,0,0,0.3); width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 9999;\">"; str += "<div id=\"tanchuang\"…

jquery 遮罩层指定位置

.css .datagrid-mask-msg { position: absolute; top: %; margin-top: -20px; padding: 12px 5px 10px 30px; width: auto; height: 16px; border-width: 2px; border-style: solid; display: none; } . js this. WaitMessage2Position=function(msg, jqobj) { $("<di…

Jquery实现遮罩层，就是弹出DIV周围都灰色不能操作

<%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3…

jquery实现div遮罩层

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-…

jQuery弹出遮罩层效果完整示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-…

jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例

本文实例讲述了jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能.分享给大家供大家参考,具体如下: 弹出层:两种方式一是打开网页就自动弹出层二是点击弹出 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http…

html 遮罩层以及弹出框的制作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery简便实现遮罩层--柯乐义<…

自写图片遮罩层放大功能jquery插件源代码，photobox.js 1.0版，不兼容IE6

阿嚏~~~ 话说本屌丝没啥开发插件的经验,可是天公不作美,公司须要让我自己开发个图片放大的插件但公司老大的话,宛如吾皇之圣旨,微臣必当肝脑涂地,莫敢不从啊~~~ 于是乎,作为一个超级小白,本人仅仅能瞎研究了,幸好黑天不负屌丝人,本屌丝最终搞出来了,尽管不尽善尽美,可是功能还是能够用的啦先附上源代码,求各种大神指导: /******************************* * photobox跨浏览器兼容插件 v1.0(不支持IE6) * 格式:<a href="big.jpg…

Jquery遮罩插件，想罩哪就罩哪！

一前言在项目开发时发现没有一个用起来爽一点的遮罩插件,看起来觉得不难好吧那就利用空闲时间,自己折腾一个吧,也好把jquery再温习一下, 需要的功能如下 1 可以全屏遮用于提交数据时 2 局部遮,用于重复提交,只遮提交按钮,此功能当时在CSDN的登录中看到过,当时觉得还不错 3 遮罩上的提示文字可自己配置,因为操作的业务场景不一样,提示的信息肯定也会不一样 4 遮罩图片可配置, 5 信息提示层大小可配置大致功能就如上几点,然后就是折腾js了,蹭蹭蹭~~~~ 然后就出来了~ 先…

jQuery弹出层插件popbox

都什么年代了,还自己写弹出层插件!是的,①自己写的自己好控制②可定制性高③兼容低版本IE 本插件有以下特性: 样式分离,可定制,纯净无图片可自定义按钮及按钮的样式.点击事件可指定选择器选择页面元素的内容作为弹出层的内容,也可以指定url来异步加载单独页面可配置遮罩层.关闭按钮.按钮栏可配置拖动.自动关闭.失焦关闭可配置打开.关闭和确定.取消时的动作先上一张截图看看样子: 使用方法: 1. 引入相关文件 <link rel="stylesheet" href="…

jQuery点击图片弹出大图遮罩层

使用jQuery插件HoverTreeShow弹出遮罩层显示大图效果体验:http://hovertree.com/texiao/hovertreeshow/ 在开发HoverTreeTop项目的产品展示功能过程中,因为要把产品图片的大图显示给用户看,就使用jQuery制作了一个插件:HoverTreeShow ,使用该插件可以很方便的弹出图片的大图,已经运用在项目中了,除了上面链接的示例外,HoverTreeTop项目的产品展示也是一个实例,请访问链接:http://hovertree.co…

在jQuery环境下制作轻巧遮罩层

遮罩层的好处就是可以屏蔽用户对遮罩层下方元素的操作. 制作原理很简单:1设置遮罩层触发按钮 2设置遮罩层内容 3设置遮罩层背景(重点是捕获内容div的大小位置)4设置点击触发按钮遮罩层背景内容同时显示或隐藏. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"…

jquery图片放大镜和遮罩层效果

图片放大镜效果将借助于jqzoom插件,遮罩层借助于thickbox插件. 1.引入样式表 /*整体样式*/ <link rel="stylesheet" href="styles/main1.css" type="text/css" /> /*图片遮罩层样式*/ <link rel="stylesheet" href="styles/thickbox.css" type="te…

分享一个JQuery弹出层插件

JQuery插件TipsWindown 1.1 一个基于jQuery的弹出层.支持拖拽,支持内容为文字,图片,URL等!至于兼容性.在IE6下,弹出对像无法绝对固定.其他应该没啥大问题: 最新更新:(2010-08-12):修正IE6下不能遮住下拉菜单的BUG,增加拖动时半透明效果. 应用演示弹出文本信息提示: 我是下拉菜单 tipsWindown("提示","text:提示信息内容","250","150","…

jQuery css3鼠标悬停图片显示遮罩层动画特效

jQuery css3鼠标悬停图片显示遮罩层动画特效效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.com/h/bjaf/q9ii3dfq.htm 代码如下: <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv=…

jQuery弹出关闭遮罩层

效果体验:http://keleyi.com/keleyi/phtml/jquery/9.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&qu…

jQuery+CSS 简单代码实现遮罩层( 兼容主流浏览器 )

/* ** jQuery版本:jQuery-1.8.3.min.js ** 浏览器:Chrome( v31.0.1650.63 m ),IE11,Firefox( v32.0.1 ),IETester下IE8-IE10** Author:博客园小dee */ 比起使用注册页和登陆页,网站在当前页使用遮罩层注册和登陆的用户体验要好不少.这里使用jQuery和CSS实现一个简单的遮罩效果. 在页面点击"注册",出现一层有不透明度的黑色遮罩:遮罩层的上方是注册框:此时无法点击页面上除注册框外…

jquery弹出关闭遮罩层实例

jquery弹出关闭遮罩层实例. 代码如下: <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title&g…

跟随屏幕滚动层、遮罩层、获取Div相对定位、整个屏幕、html文档的jquery基本操作

一.层跟随屏幕滚动 <div style="width:120px;height:120px;border:1px solid red; position:absolute; left:800px; top:100px; z-index:1001;" id="AdminUserStateDiv"> </div> <div class="div1">层1</div…

网站开发常用jQuery插件总结(二）弹出层插件Lightbox_me

网站开发过程中,为了增加网站交互效果,我们有时需要在当前页面弹出诸如登陆.注册.设置等窗口.而这些窗口就是层,弹出的窗口就是弹出层.jQuery中弹出层插件很多,但有些在html5+css3浏览器下,支持完美.而在例如ie8一下的浏览器下显示不出应有的效果.例如jquery.avgrund插件在ie8下就无法显示. 本文介绍的插件Lightbox_me可以完美的支持chrome,firefox和ie7,ie8,ie9等主流浏览器. 1.Lightbox_me插件功能用于显示弹出层 2.Ligh…

网站开发常用jQuery插件总结(二）弹出层插件Lightbox

网站开发过程中,为了增加网站交互效果,我们有时需要在当前页面弹出诸如登陆.注册.设置等窗口.而这些窗口就是层,弹出的窗口就是弹出层.jQuery中弹出层插件很多,但有些在html5+css3浏览器下,支持完美.而在例如ie8一下的浏览器下显示不出应有的效果.例如jquery.avgrund插件在ie8下就无法显示. 本文介绍的插件Lightbox_me可以完美的支持chrome,firefox和ie7,ie8,ie9等主流浏览器. 1.Lightbox_me插件功能实现弹出层操作 2.Ligh…

jQuery遮罩插件 jquery.blockUI.js

Overview jQuery BlockUI 插件可以在不同锁定浏览器的同时,模拟同步模式下发起Ajax请求的行为.该插件激活时,会组织用户在页面进行的操作,直到插件被关闭.BlockUI通过向DOM中添加元素实现其外观和组织用户交互的行为. 使用jQuery BlockUI,首先需要在jQuery后面引用 jquery.blockUI.js jquery.blockUI.js插件下载地址:http://jquery.malsup.com/block/ 用法很简单,组织用户对页面的交互: $.…

jQuery实现遮罩层

1.1 背景半透明遮罩层样式需要一个黑色(当然也可以其他)背景,且须设置为绝对定位,以下是项目中用到的css样式: /* 半透明的遮罩层 */ #overlay { background: #000; filter: alpha(opacity=50); /* IE的透明度 */ opacity: 0.5; /* 透明度 */ display: none; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z…

基于jquery hover图片遮罩层滑动

分享一款基于jquery hover图片遮罩层滑动.这是一款仿腾讯课堂的鼠标悬停经过图片遮罩透明层滑动效果.效果图如下: 在线预览源码下载实现的代码. html代码: <div class="web"> <img src="images/course.jpg"/> <div class="con"> <ul> <li> <img src="images/class…