jQuery弹窗组件 colorbox

在开发微信端wap网站时,由于浏览器限制,选用jQuery插件colorbox解决弹窗问题。colorbox基于jQuery,需引入jquery.js、jquery.colorbox.js和colorbox.css。通过设置不同参数,如无过渡动画、inline为true,实现图层功能。在微信环境中,colorbox表现良好,提供了一种理想的弹窗解决方案。

公司开发微信端的wap网站,因为微信浏览器的限制,对很多jquery组件支持的都不是很好,弹窗总是有这样那样的问题,试验了好几个之后,最后使用了colorbox这款jquery插件
github:https://github.com/jackmoore/colorbox

将源码clone至本地,代码目录如下

colorbox ➤ ls 
LICENSE.md             例子1               i18n
README.md              例子2               jquery.colorbox-min.js
bower.json             例子3               jquery.colorbox.js
colorbox.ai            例子4               package.json
content                例子5

它是基于jquery开发的,使用的前提是
包含,jquery.js,jquery.colorbox.js,以及样式文件colorbox.css
例子1到5是作者写的例子,包含不一样的样式文件,如果你觉得哪个好看,就把哪个里面的css文件包含进来即可,附上我的调用代码

<link rel="stylesheet" media="all" href="/assets/weixin/colorbox.css" />
<script src="/assets/weixin/jquery.js"></script>
<script src="/assets/weixin/colorbox.js?"></script>

有了这三个文件,就可以来写浮层了,先把它的常用属性列出

transition "elastic" 
过渡效果,可以是"elastic", "fade", or "none"

speed 350 
设置过渡效果的持续时间,毫秒

href false 
这个用来设置一个锚标记的值或者一个不是锚的元素,例如图像或者表单的按钮
例子:$('h1').colorbox({href:"welcome.html"})

title false 
这可以为Colorbox设置一个标题

rel false 
这个可以根据元素的rel属性设置要显示的元素集合,也可以覆盖一个存在的rel属性
例子:$('#例子 a').colorbox({rel:'group1'})

width false 
设置宽度,包括边框和按钮
例子: width: "100%", "500px", or 500

height false 
设置高度,包括边框和按钮
例子: "100%", "500px", or 500

innerWidth false
这个可以设定一个固定的内大小,包括边框和按钮 
例子: "50%", "500px", or 500

innerHeight false 
这个可以设定一个固定的内高度,包括边框和按钮
例子: "50%", "500px", or 500

initialWidth 300 
设置初始化宽度

initialHeight 100 
设置初始化高度

maxWidth false 
设置内容的最大宽度
例子: "100%", 500, "500px"

maxHeight false 
设置内容的最大高度
例子: "100%", 500, "500px"

scalePhotos true 
如果是true且maxWidth, maxHeight, innerWidth, innerHeight, width, 或者 height 被设置,
Colorbox会缩放图片以使用边框

scrolling true 
如果是false,Colorbox不会为了溢出元素设置滚动条

iframe false 
如果是true,元素会在Iframe中显示

inline false
如果是true,jQuery选择器可以用来选择要显示的元素
例子: $("#inline").colorbox({inline:true, href:"#myForm"});

html false
这个是直接让你显示HTML代码
例子: $.fn.colorbox({html:'Hello'});

photo false 
如果为trueColorBox只会把元素按照图片显示,防止类似photo.php?pic=1这样的连接被误认为是网页

opacity 0.85 
遮罩层不透明度 从0-1之间取值

open false 
如果为true,ColorBox会自动开启

preloading true 
如果为True,ColorBox会自动预载要显示图片

overlayClose truetrue单击遮罩层就可以把ColorBox关闭

slideshow falseTrue,会自动滚动图片

slideshowSpeed 2500 
设置时间,毫秒

slideshowAuto true 
为tuue,滑动会自动开始

slideshowStart "start slideshow" 
开始自动滑动按钮的文本

slideshowStop "stop slideshow" 
停止自动滑动按钮的文本

current "{current} of {total}" 
文本内容:现在正在显示的元素序号

previous "previous" 
“上一个”按钮的文本

next "next" 
“下一个”按钮的文本

close "close" 
“关闭”按钮的文本

说了这么多,开始使用,实现我的图层,初始化图层,根据class名绑定,设置过度动画为无,inline为true,高和宽为100%

$(".inline").colorbox({transition:"none", inline:true, height:"100%", width:"100%"});

页面调用标签为a标签,href为ID为inline_content的内容

<a class="inline" href="#inline_content">
      <div class="tour_txt_box fl container-fliud">
        <%= text_field '', 'city', placeholder: '请输入地区,仅限于北京,例如朝阳区',  class: "fl tour_txt col-sm-11 col-xs-10", readonly: 'readonly', datatype: "s", nullmsg: "请选择所在区域", id: "wedding_area" %>
<a href="#inline_content" class="fl col-sm-1 col-xs-2 inline"><%= image_tag "icon_rightarrow.png"%></a>
      </div>
</a>
<div style='display:none'>
<div id='inline_content' style='padding:10px; background:#fff;'></div>
</div>

先把需要弹窗的内容,赋值到id为inline_content的div中,然后一切就OK了

效果图
这里写图片描述

默认的关闭按钮是在整个浮层的右下方,修改到右上方需要更改css文件,增加top:0 属性,关闭按钮就会跑到右上方了

#cboxClose {top:0; border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }

经测试,在微信浏览器体验也很好,终于告一段落,周末愉快。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值