Colorbox 使用筆記

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,
      overlayClose: false,
      iframe: true,
      href: "www.google.com"  // 訊息網頁
    });
  }
</script>

使用 iframe 功能，欲於訊息頁面關閉 lightbox ，需使用下列語法
parent.jQuery.colorbox.close();