公司開發微信端的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; }

經測試，在微信瀏覽器體驗也很好，終于告一段落，周末愉快。

總結

以上是生活随笔為你收集整理的jQuery弹窗组件 colorbox的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。