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...
從來沒有嚐試，一個人的旅行。
留言
張貼留言