基于jQuery的web弹层插件

演示

源代码

Function.prototype.binding = function() {if (arguments.length < 2 && typeof arguments[0] == "undefined") return this;var __method = this, args = jQuery.makeArray(arguments), object = args.shift();return function() {return __method.apply(object, args.concat(jQuery.makeArray(arguments)));}
}var Class = function(subclass){subclass.setOptions = function(options){this.options = jQuery.extend({}, this.options,options);for(var key in options){if(/^on[A-Z][A-Za-z]*$/.test(key)){$(this).bind(key,options[key]);}}}var fn =  function(){if(subclass._init && typeof subclass._init == 'function'){this._init.apply(this,arguments);}}if(typeof subclass == 'object'){fn.prototype = subclass;}return fn;
}var PopupLayer = new Class({options:{trigger:null,                            //触发的元素或id,必填参数popupBlk:null,                           //弹出内容层元素或id,必填参数closeBtn:null,                           //关闭弹出层的元素或idpopupLayerClass:"popupLayer",            //弹出层容器的class名称eventType:"click",                       //触发事件的类型offsets:{                                //弹出层容器位置的调整值x:0,y:0},useFx:false,                             //是否使用特效useOverlay:false,                        //是否使用全局遮罩usePopupIframe:true,                     //是否使用容器遮罩isresize:true,                           //是否绑定window对象的resize事件onBeforeStart:function(){}            //自定义事件},_init:function(options){this.setOptions(options);                //载入设置this.isSetPosition = this.isDoPopup = this.isOverlay = true;    //定义一些开关this.popupLayer = $(document.createElement("div")).addClass(this.options.popupLayerClass);     //初始化最外层容器this.popupIframe = $(document.createElement("iframe")).attr({border:0,frameborder:0});         //容器遮罩,用于屏蔽ie6下的selectthis.trigger = $(this.options.trigger);                         //把触发元素封装成实例的一个属性,方便使用及理解this.popupBlk = $(this.options.popupBlk);                       //把弹出内容层元素封装成实例的一个属性this.closeBtn = $(this.options.closeBtn);                       //把关闭按钮素封装成实例的一个属性$(this).trigger("onBeforeStart");                               //执行自定义事件。this._construct()                                               //通过弹出内容层,构造弹出层,即为其添加外层容器及底层iframethis.trigger.bind(this.options.eventType,function(){            //给触发元素绑定触发事件if(this.isSetPosition){this.setPosition(this.trigger.offset().left + this.options.offsets.x, this.trigger.offset().top + this.trigger.get(0).offsetHeight + this.options.offsets.y);}this.options.useOverlay?this._loadOverlay():null;               //如果使用遮罩则加载遮罩元素(this.isOverlay && this.options.useOverlay)?this.overlay.show():null;if(this.isDoPopup && (this.popupLayer.css("display")== "none")){this.options.useFx?this.doEffects("open"):this.popupLayer.show();}							 }.binding(this));this.isresize?$(window).bind("resize",this.doresize.binding(this)):null;this.options.closeBtn?this.closeBtn.bind("click",this.close.binding(this)):null;   //如果有关闭按钮,则给关闭按钮绑定关闭事件},_construct:function(){                  //构造弹出层this.popupBlk.show();this.popupLayer.append(this.popupBlk.css({opacity:1})).appendTo($(document.body)).css({position:"absolute",'z-index':2,width:this.popupBlk.get(0).offsetWidth,height:this.popupBlk.get(0).offsetHeight});this.options.usePopupIframe?this.popupLayer.append(this.popupIframe):null;this.recalculatePopupIframe();this.popupLayer.hide();},_loadOverlay:function(){                //加载遮罩pageWidth = ($.browser.version=="6.0")?$(document).width()-21:$(document).width();this.overlay?this.overlay.remove():null;this.overlay = $(document.createElement("div"));this.overlay.css({position:"absolute","z-index":1,left:0,top:0,zoom:1,display:"none",width:pageWidth,height:$(document).height()}).appendTo($(document.body)).append("<div style='position:absolute;z-index:2;width:100%;height:100%;left:0;top:0;opacity:0.3;filter:Alpha(opacity=30);background:#000'></div><iframe frameborder='0' border='0' style='width:100%;height:100%;position:absolute;z-index:1;left:0;top:0;filter:Alpha(opacity=0);'></iframe>")},doresize:function(){this.overlay?this.overlay.css({width:($.browser.version=="6.0")?$(document).width()-21:$(document).width(),height:($.browser.version=="6.0")?$(document).height()-4:$(document).height()}):null;if(this.isSetPosition){this.setPosition(this.trigger.offset().left + this.options.offsets.x, this.trigger.offset().top + this.trigger.get(0).offsetHeight + this.options.offsets.y);}},setPosition:function(left,top){          //通过传入的参数值改变弹出层的位置this.popupLayer.css({left:left,top:top});},doEffects:function(way){                //做特效way == "open"?this.popupLayer.show("slow"):this.popupLayer.hide("slow");},recalculatePopupIframe:function(){     //重绘popupIframe,这个不知怎么改进,只好先用这个笨办法。this.popupIframe.css({position:"absolute",'z-index':-1,left:0,top:0,opacity:0,width:this.popupBlk.get(0).offsetWidth,height:this.popupBlk.get(0).offsetHeight});},close:function(){                      //关闭方法this.options.useOverlay?this.overlay.hide():null;this.options.useFx?this.doEffects("close"):this.popupLayer.hide();}
});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/205321.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LiDAR 城市模型的 3D Python 工作流

1.引言 LiDAR&#xff08;Light Detection and Ranging&#xff09;是一种通过测量激光束从发射到返回的时间来测量距离&#xff0c;从而生成物体的三维表面模型的技术。这种技术在城市建模中具有广泛的应用&#xff0c;可以用于城市规划、环境监测、交通仿真等领域。而使用Pyt…

Linux查看命令的绝对路径

linux查看命令的绝对路径 在Linux中&#xff0c;可以使用以下命令来查看命令的绝对路径&#xff1a; 1、which 命令名 例如&#xff0c;要查看chronyc命令的绝对路径&#xff0c;可以运行&#xff1a; which chronyc 2、whereis 命令名 例如&#xff0c;要查看chronyc命令…

HMMER学习——(待完善)

HMMER profile HMM files A HMMER profile file looks like this, with …’s marking elisions made for clarity and space: 1.全基因组基因家族的分析系列之HMMER3.1使用 2. hmmalign - align sequences to an HMM profile

springboot集成邮箱验证功能

准备工作 开启SMTP服务 前往你的邮箱网站&#xff0c;以网易邮箱为例&#xff0c;打开网易邮箱地址&#xff0c;登录你的邮箱&#xff0c;进入邮箱管理后台界面。点击“设置”》》“POP3/SMTP/IMAP”后&#xff0c;点击开启SMTP服务即可。 技术实现 Spring Boot 发送邮件验证…

linux学习之详解文件

目录 1.先认识文件 2.c语言中常用文件接口 fopen&#xff08;打开文件&#xff09; 3.系统接口操作文件 open write 文件的返回值以及打开文件的本质 理解struct_file内核对象 了解文件描述符&#xff08;fd&#xff09;分配规则 重定向 dup接口 标准错误流 文件缓冲…

YITH WooCommerce Product Bundles Premium电商商城产品捆绑销售高级版

点击阅读YITH WooCommerce Product Bundles Premium电商商城产品捆绑销售高级版原文 YITH WooCommerce Product Bundles Premium电商商城产品捆绑销售高级版的作用是在您的商店中创建特别优惠&#xff0c;将产品捆绑在一起提供折扣和特价。 您如何从中受益&#xff1a; 您将…

Swift 中 User Defaults 的读取和写入

文章目录 前言介绍 User Defaults共享 User DefaultsUser Defaults 存储数据类型响应更改监控 User Defaults 更改覆盖User Defaults 设置考虑的替代方案Keychain 用于安全性用于跨平台的 CloudKit 结论 前言 User Defaults 是 Swift 应用程序存储在应用启动之间保持的首选项的…

uni-app解决video组件全屏时页面横竖错乱问题

使用 video组件播放视频时&#xff0c;在苹果手机上全屏后页面横竖屏错乱&#xff0c;点击返回按钮退出全屏&#xff0c;页面变成横屏&#xff0c;在iOS16 以上都会出现这个问题。 解决方案 修改manifest.json配置文件 "app-plus" : {...略"screenOrientatio…

Nginx实战教程二

一.介绍 本文介绍SPRINGBOOTVUE项目配置API服务器的两种情况 NGINX 配置VUE项目 二.vue项目和后端api接口不在同一台服务器 如果打包好的vue项目应用(dist) 和后端 api 接口没有运行在同一个主机上 此时需要在开发环境下将 API 请求代理到 API 所在服务器。通过配置 vue.confi…

深度优先搜索DFS与记忆化搜索

深度优先搜索&#xff08;DFS&#xff09; 求连通块 &#x1f449;HDOJ-1241 Oil Deposits 【题目】石油勘探公司把油田分成许多的大格&#xff0c;每个大格又分为许多小格&#xff0c;然后分析各个小格是否有石油矿藏。有矿藏的小格&#xff08;用表示&#xff09;称为容器.…

基于ssm实验室课程管理系统源码和论文

idea 数据库mysql5.7 数据库链接工具&#xff1a;navcat,小海豚等 环境&#xff1a; jdk8 tomcat8.5 摘 要 随着科学实验规模的不断扩大&#xff0c;实验室课程数量的急剧增加&#xff0c;有关实验室课程的各种信息量也在不断成倍增长。面对庞大的信息量&#xff0c;就需要有…

HBase 使用JDK21

HBase 使用JDK21 启动zookeeper和hadoop 创建软件目录 mkdir -p /opt/soft cd /opt/soft下载软件 wget https://dlcdn.apache.org/hbase/2.5.6/hbase-2.5.6-hadoop3-bin.tar.gz解压 hbase tar -zxvf hbase-2.5.6-hadoop3-bin.tar.gz修改 hbase 目录名称 mv hbase-2.5.6-had…

一则广告,一个故事,这就我选择学习计算机专业的两个原因

还记得当初自己为什么选择计算机&#xff1f; 现在回想起来&#xff0c;当初驱使自己选择学习计算机专业的原因&#xff0c;一共有两个&#xff1a; 一、一则长城电脑的广告。 上个世纪80年代&#xff0c;我还在读小学&#xff0c;当时在中央电视台上经常播放着的长城电脑的一则…

Abaqus基础教程--胶合失效仿真

胶合是电子行业中常见的连接方式&#xff0c;abaqus中常用cohesive单元或者cohesive接触两种方法进行胶合失效仿真&#xff0c;这两种方式操作方法有所差别&#xff0c;但结果一般大同小异。 本例模型比较简单&#xff0c;建模过程从略&#xff0c;使用静态分析&#xff0c;使…

【GAMES101】三维变换

games101的第四节课讲了三维变换和观察变换&#xff0c;我们这里先记录一下三维变换的知识&#xff0c;后面再讲观察变换 齐次坐标下的三维变换 类似于解决之前二维变换平移的问题&#xff0c;三维变换下用齐次坐标通过增加一个维度来表示&#xff0c;第四个维度为1表示这是个…

Spring-Security取消验证-Get请求接口正常,Post请求报错403

现象&#xff1a;springcloud项目夹带security相关的包后启动提示如下&#xff1a; Using generated security password: f67f9afa-xxxxxxxxxxx-a85e-88175f5a7c8aThis generated password is for development use only. Your security configuration must be updated before …

无敌是多么的寂寞!一本书讲透Java多线程!吊打多线程从原理到实践!

摘要 互联网的每一个角落&#xff0c;无论是大型电商平台的秒杀活动&#xff0c;社交平台的实时消息推送&#xff0c;还是在线视频平台的流量洪峰&#xff0c;背后都离不开多线程技术的支持。在数字化转型的过程中&#xff0c;高并发、高性能是衡量系统性能的核心指标&#xff…

vue2+electron桌面端一体机应用

vue2+electron项目 前言:公司有一个项目需要用Vue转成exe,首先我使用vue-cli脚手架搭建vue2项目,然后安装electron 安装electron 这一步骤可以省略,安装electron-builder时会自动安装electron npm i electron 安装electron-builder vue add electron-builder 项目中多出…

(NeRF学习)3D Gaussian Splatting Instant-NGP

学习参考&#xff1a; 3D Gaussian Splatting入门指南【五分钟学会渲染自己的NeRF模型&#xff0c;有手就行&#xff01;】 三维重建instant-ngp环境部署与colmap、ffmpeg的脚本参数使用 一、3D Gaussian Splatting &#xff08;一&#xff09;3D Gaussian Splatting环境配置…

JVM 类的加载器的基本特征和作用

Java全能学习面试指南&#xff1a;https://javaxiaobear.cn 1、作用 类加载器是 JVM 执行类加载机制的前提 ClassLoader的作用&#xff1a; ClassLoader是Java的核心组件&#xff0c;所有的Class都是由ClassLoader进行加载的&#xff0c;ClassLoader负责通过各种方式将Class信…