お手軽な(?)ポップアップウィンドウ

【覚え書き】
お手軽な(?)ロールオーバーイメージとに続き、
同じ手法を使った「サブウインドウポップアップ」スクリプトです。

Ex.)
サブウインドウ用のHTMLを用意。
ポップアップ用リンクタグに「popup」の文字を含めた target オプションを指定。
rel に"幅,高さ"を指定するとそのサイズでウインドウをオープンする。
(<a href="subwin.html" target="popup" rel="400,200">別ウインドウを開く</a>)
※下の javascript では、デフォルトの幅を640px固定です。その他の window.open オプションはスクリプトの中を覗いて下され(^^;)


【popup.js】
//-------------------------------------
//  Popup Window
//-------------------------------------

function setPopUp() {
    if(!document.getElementsByTagName) return false;
    var popUpList = document.getElementsByTagName('a');
    for(var i = 0; i < popUpList.length; i++) {
        if(popUpList[i].target.match(/popup/i)) {
            popUpList[i].onclick = function() {
                if(this.rel) {
                    var r = this.rel.split(',');
                    var wSize = optPopUp(r[0],r[1]);
                } else {
                    var wSize = optPopUp();
                }
                var win = window.open(this.href,this.target,wSize).focus();
                return false;
            }
        }
    }
    return true;
}

/* Options */
function optPopUp(h,v) {
    if(!v) {
        v = (navigator.userAgent.indexOf('Opera',0) >= 0)
        ? parent.window.innerHeight - 25
        : screen.availHeight - 75;
    }
    if(!h) h = 640;
    var opt =
        ',toolbar=no,location=no,directories=no,status=no'+
        ',menubar=no,resizable=no,scrollbars=yes'+
        ',screenX=0,screenY=0,left=5,top=5';
    return 'width='+h+',height='+v+opt;
}

/* Onload */
function setOnLoad() {
    setPopUp();
}
window.onload = setOnLoad;

この記事へのコメント


この記事へのトラックバック