? ? ? ?在web前端項目的開發中，少不了需要使用彈出的對話框，比如提示用戶下載APP、提示上傳圖片成功等。而colorbox這個插件就是一個很不錯的對話框插件，在網上搜索時，大家也都是主要推薦這個插件。

? ? ? ?下面介紹這個插件的使用方法。

首先當然是引入插件的css、js文件。

<link rel="stylesheet" type="text/css" href="../css/colorbox.css?rev=a0a94e33b8c34190c3539d6b7076f118"> <script src="../js/jquery.colorbox.min.js?rev=f2e30ffc0b33ffea594c9a47824e3838"></script>

然后在需要彈出對話框的html文件中添加如下代碼：

<!--提示下載APP對話框--><div id="download-app-colorbox-container"><div id="download-APP-colorbox"><p class="colorbox-tip">提示信息</p><div class="line"></div><div id="voteResultTxt"><a href="http://www.v2gogo.com/down.html">點擊下載微兔GOGO APP</a></div></div></div>CSS代碼如下：

#download-app-colorbox-container {display: none; }

js代碼如下：

// 提示下載APP對話框 function showDownloadAPPColorbox(){$.colorbox({reposition: false, // ?//top: "20px",width: "80%",height: "auto",inline: true,href: "#download-APP-colorbox"}); }
? ? ? ?一般來講，對話框在初始情況下，默認都會隱藏，然后在需要的時候彈出，因此，在上面的CSS代碼中，對話框的父級元素download-app-colorbox-container默認是隱藏的。在js代碼中，如果需要彈出對話框，直接調用函數showDownloadAPPColorbox()即可。

? ? ? ? 需要注意的是，如果在CSS中設置download-app-colorbox為默認隱藏，最終調用的對話框將不正常，應該設置其父元素，即download-app-colorbox-container。對話框才能正確顯示。

? ? ? ? 正常彈出的對話框如下圖所示：

總結

以上是生活随笔為你收集整理的colorbox弹出层插件使用方法及注意事项的全部內容，希望文章能夠幫你解決所遇到的問題。

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