首页 经典的底部弹出div层

经典的底部弹出div层

举报
开通vip

经典的底部弹出div层 弹出框 var Pop = function(options){ this.isIE = (document.all) ? true : false; this.isIE6 = this.isIE && (navigator.userAgent.indexOf('MSIE 6.0') != -1); this.isIE6 ? this.position = "absolute" : this.position =...

经典的底部弹出div层
弹出框


浮动层:4方向+水平垂直居中定位(支持遮罩效果)

IE6下是用absolute模拟fixed定位,其他浏览器都是以fixed来定位。

参数说明:

========浮动框相关属性============

oPop:浮动框ID(默认值:idPop)

zIndex:浮动框的z-index(默认值:999)

left:距离左边多少像素(默认值:0)

right:距离右边多少像素(默认值:0)

top:距离顶部多少像素(默认值:0)

bottom:距离底部多少像素(默认值:0)

mode:浮动层默认定位左上(默认值:["left", "top"])


========遮罩层相关属性============

beCover:页面载入时是否显示遮盖层(默认值:false)

cover:是否显示遮盖层(遮盖层显示的必须条件)(默认值:false)

zIndexCover:遮盖层的z-index(默认值:888)

colorCover:遮盖层的背景颜色(默认值:"#000")

opactiyCover:遮盖层的透明度(默认值:0.5)


========浮动框收缩相关属性============

idShrink:收缩按钮ID(默认值:null)

minHeight:收缩后的高度(默认值:0)

maxHeight:展开后的高度(默认值:0)

classOne:切换用的class(默认值:null)

classTwo:切换用的class(默认值:null)

========关闭、打开浮动层相关属性============

idOpen:打开按钮ID(默认值:null)

idClose:关闭按钮ID(支持多关闭按钮)(默认值:[])


结构如下:

浮动层的position类型已在脚本里面写好,用的时候只需定义浮动层的高、宽、是否显示(display)即可


...........


例一:左下

打开

关闭



例二:右下

打开

关闭



例三:左上

打开

关闭



例四:右上

打开

关闭



例五:中间

打开

关闭



例六:中间(刷新页面直接显示)

打开

关闭





测试代码

hello world!hello world!hello world!hello world!hello world!hello world!hello world!hello world!hello world!

hello world!

hello world!

hello world!

hello world!

hello world!

hello world!

hello world!

hello world!

hello world!

hello world!

hello world!

hello world!

hello world!

hello world!

hello world!

hello world!

hello world!

hello world!

hello world!

hello world!

hello world!

hello world!

hello world!

hello world!

hello world!

hello world!

hello world!

hello world!

hello world!

hello world!

hello world!

hello world!

本文档为【经典的底部弹出div层】,请使用软件OFFICE或WPS软件打开。作品中的文字与图均可以修改和编辑, 图片更改请在作品中右键图片并更换,文字修改请直接点击文字进行修改,也可以新增和删除文档中的内容。
该文档来自用户分享,如有侵权行为请发邮件ishare@vip.sina.com联系网站客服,我们会及时删除。
[版权声明] 本站所有资料为用户分享产生,若发现您的权利被侵害,请联系客服邮件isharekefu@iask.cn,我们尽快处理。
本作品所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用。
网站提供的党政主题相关内容(国旗、国徽、党徽..)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。
下载需要: 免费 已有0 人下载
最新资料
资料动态
专题动态
is_281650
暂无简介~
格式:doc
大小:47KB
软件:Word
页数:0
分类:互联网
上传时间:2019-09-20
浏览量:29