公司开发微信端的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
如果为true,ColorBox只会把元素按照图片显示,防止类似photo.php?pic=1这样的连接被误认为是网页
opacity 0.85
遮罩层不透明度 从0-1之间取值
open false
如果为true,ColorBox会自动开启
preloading true
如果为True,ColorBox会自动预载要显示图片
overlayClose true
为true单击遮罩层就可以把ColorBox关闭
slideshow false
为True,会自动滚动图片
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; }
经测试,在微信浏览器体验也很好,终于告一段落,周末愉快。