公司開(kāi)發(fā)微信端的wap網(wǎng)站，因?yàn)槲⑿艦g覽器的限制，對(duì)很多jquery組件支持的都不是很好，彈窗總是有這樣那樣的問(wèn)題，試驗(yàn)了好幾個(gè)之后，最后使用了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開(kāi)發(fā)的，使用的前提是
包含，jquery.js，jquery.colorbox.js，以及樣式文件colorbox.css
例子1到5是作者寫的例子，包含不一樣的樣式文件，如果你覺(jué)得哪個(gè)好看，就把哪個(gè)里面的css文件包含進(jìn)來(lái)即可，附上我的調(diào)用代碼

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

有了這三個(gè)文件，就可以來(lái)寫浮層了，先把它的常用屬性列出

transition "elastic" 過(guò)渡效果，可以是"elastic", "fade", or "none"speed 350 設(shè)置過(guò)渡效果的持續(xù)時(shí)間，毫秒href false 這個(gè)用來(lái)設(shè)置一個(gè)錨標(biāo)記的值或者一個(gè)不是錨的元素，例如圖像或者表單的按鈕 例子:$('h1').colorbox({href:"welcome.html"})title false 這可以為Colorbox設(shè)置一個(gè)標(biāo)題rel false 這個(gè)可以根據(jù)元素的rel屬性設(shè)置要顯示的元素集合，也可以覆蓋一個(gè)存在的rel屬性 例子:$('#例子 a').colorbox({rel:'group1'})width false 設(shè)置寬度，包括邊框和按鈕 例子: width: "100%", "500px", or 500height false 設(shè)置高度，包括邊框和按鈕 例子: "100%", "500px", or 500innerWidth false 這個(gè)可以設(shè)定一個(gè)固定的內(nèi)大小，包括邊框和按鈕 例子: "50%", "500px", or 500innerHeight false 這個(gè)可以設(shè)定一個(gè)固定的內(nèi)高度，包括邊框和按鈕 例子: "50%", "500px", or 500initialWidth 300 設(shè)置初始化寬度initialHeight 100 設(shè)置初始化高度maxWidth false 設(shè)置內(nèi)容的最大寬度 例子: "100%", 500, "500px"maxHeight false 設(shè)置內(nèi)容的最大高度 例子: "100%", 500, "500px"scalePhotos true 如果是true且maxWidth, maxHeight, innerWidth, innerHeight, width, 或者 height 被設(shè)置， Colorbox會(huì)縮放圖片以使用邊框scrolling true 如果是false,Colorbox不會(huì)為了溢出元素設(shè)置滾動(dòng)條iframe false 如果是true，元素會(huì)在Iframe中顯示inline false 如果是true,jQuery選擇器可以用來(lái)選擇要顯示的元素 例子: $("#inline").colorbox({inline:true, href:"#myForm"});html false 這個(gè)是直接讓你顯示HTML代碼 例子: $.fn.colorbox({html:'Hello'});photo false 如果為true，ColorBox只會(huì)把元素按照?qǐng)D片顯示，防止類似photo.php?pic=1這樣的連接被誤認(rèn)為是網(wǎng)頁(yè)opacity 0.85 遮罩層不透明度 從0-1之間取值open false 如果為true,ColorBox會(huì)自動(dòng)開(kāi)啟preloading true 如果為True,ColorBox會(huì)自動(dòng)預(yù)載要顯示圖片overlayClose true 為true單擊遮罩層就可以把ColorBox關(guān)閉slideshow false 為True，會(huì)自動(dòng)滾動(dòng)圖片slideshowSpeed 2500 設(shè)置時(shí)間，毫秒slideshowAuto true 為tuue，滑動(dòng)會(huì)自動(dòng)開(kāi)始slideshowStart "start slideshow" 開(kāi)始自動(dòng)滑動(dòng)按鈕的文本slideshowStop "stop slideshow" 停止自動(dòng)滑動(dòng)按鈕的文本current "{current} of {total}" 文本內(nèi)容：現(xiàn)在正在顯示的元素序號(hào)previous "previous" “上一個(gè)”按鈕的文本next "next" “下一個(gè)”按鈕的文本close "close" “關(guān)閉”按鈕的文本

說(shuō)了這么多，開(kāi)始使用，實(shí)現(xiàn)我的圖層，初始化圖層，根據(jù)class名綁定，設(shè)置過(guò)度動(dòng)畫為無(wú)，inline為true，高和寬為100%

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

頁(yè)面調(diào)用標(biāo)簽為a標(biāo)簽，href為ID為inline_content的內(nèi)容

<a class="inline" href="#inline_content"><div class="tour_txt_box fl container-fliud"><%= text_field '', 'city', placeholder: '請(qǐng)輸入地區(qū)，僅限于北京，例如朝陽(yáng)區(qū)', class: "fl tour_txt col-sm-11 col-xs-10", readonly: 'readonly', datatype: "s", nullmsg: "請(qǐng)選擇所在區(qū)域", 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>

先把需要彈窗的內(nèi)容，賦值到id為inline_content的div中，然后一切就OK了

效果圖

默認(rèn)的關(guān)閉按鈕是在整個(gè)浮層的右下方，修改到右上方需要更改css文件，增加top：0 屬性，關(guān)閉按鈕就會(huì)跑到右上方了

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

經(jīng)測(cè)試，在微信瀏覽器體驗(yàn)也很好，終于告一段落，周末愉快。

總結(jié)

以上是生活随笔為你收集整理的jQuery弹窗组件 colorbox的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。