Colorbox 詳細使用說明請參考 a jQuery lightbox 情境一: 當開發RWD網頁時,我想將 lightbox 的寬度依顯示螢幕的寬度來決定。 想讓 lightbox 的內容不會太擁擠或太空洞。 <script> var deviceWidth = 0; $(function() { deviceWidth = $(window).width(); $(window).resize(function(){ deviceWidth = $(window).width(); }); }); function showMessage() { var colorboxWidth = "100%"; if (deviceWidth > 767) { colorboxWidth = "70%"; } $.colorbox({innerWidth: colorbox}); } </script> 情境二: 為了讓使用者確實閱讀完 lightbox 內的訊息,想將關閉 lightbox 的熱鍵移除。 <script> function showMessage() { $.colorbox({ escKey: false, // 按下esc鍵關閉 Colorbox 視窗 arrowKey: false, // 按下方向鍵關閉 Colorbox 視窗 overlayClose: false // 在背景遮罩點一下滑鼠左鍵,關閉 Colorbox 視窗 }); } </script> 情境三: 當 Lightbox 內的訊息太長,或需要互動性質的內容,開啓 iframe 功能,互動換頁才不會讓整個網頁換掉。 <script> function showMessage() { $.colorbox({ escKey: false, arrowKey: false, o