LightWindow【その2】

2009.03.31 Author: えす

続いて、LightWindowの細かい使い方を紹介します。


LightWindowの設定値を変更することもできます。

変更は下記のように行います。

  <script type="text/javascript">
      function openLightWindow() {
        myLightWindow = new lightwindow({
          resizeSpeed : 20,  // ロード時の画面リサイズスピード
          skin        : {
            loading : '<div id="lightwindow_loading" >'+  // ロード時の画面
                      '<span>しばらくお待ちください。</span>'+
                      '<iframe name="lightwindow_loading_shim" id="lightwindow_loading_shim" src="javascript:false;" frameBorder="0" scrolling="no"></iframe>'+
                      '</div>'
          }
        });

        myLightWindow.activateWindow({
          href    : 'http://www.conextivo.com/',
          title   : '',
          height: 600,
          width : 500,
          loadingAnimation: true,
          type  : 'external'
        });
      }
  </script>
  <a href="javascript:openLightWindow()">http://www.conextivo.com/</a>

new lightwindowのオプションで、設定値を変更できますので、JavaScriptのファイルを直接編集する必要はありません。


また、LightWindowのiframe内に別ページを呼び出し、別ページからLightWindowを閉じたいなんてこともあります。

LightWindowを閉じるには「 myLightWindow.deactivate() 」を使用します。

ただし、iframeで呼び出している場合、親ウィンドウのmyLightWindowに対して操作が必要ですので、下記のようになります。

  parent.myLightWindow.deactivate();

こんな感じで、JavaScriptから表示することで、細かい部分も制御することができます。

名古屋のWebシステム開発・ネットワーク構築会社 コネクティボへ