公司开发微信端的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 500height false
设置高度，包括边框和按钮
例子: "100%", "500px", or 500innerWidth false
这个可以设定一个固定的内大小，包括边框和按钮
例子: "50%", "500px", or 500innerHeight false
这个可以设定一个固定的内高度，包括边框和按钮
例子: "50%", "500px", or 500initialWidth 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; }经测试，在微信浏览器体验也很好，终于告一段落，周末愉快。
