ポップアップウインドウをonclickでなくclassで開く(サイズ変更可能Ver)

以前、。ポップアップウインドウをOnclickでなくclassで開くという記事を書いてました。その中で、
問題点としては、各ポップアップウインドウ毎にサイズやスクロールバーの有無を個別指定できないことです。とぼやいていたら、うちのプログラマがサイズ変更可能バージョンを作ってくれました。


手順なんかは、以前の記事と一緒です。ポップアップウインドウをOnclickでなくclassで開く参照。

Javascript

とりあえず、popup.js で。
(2008/08/28追記)なぜかシングルクオートが半角になってくれないので、こちらからJSファイルをダウンロードしてご利用ください。申し訳ない。popup.js

window.onload = function (){
	var node_a = document.getElementsByTagName('a');
		for (var i in node_a) {
			if(node_a[i].className == 'popup'){
				node_a[i].onclick = function() {
					return winOpen(this.href, this.rel)
				};
			}
		}
} ;

function winOpen(url, rel) {
	var split = rel.split(',') ;
	window.open(
	url,'popup',
	'width='+ split[0] +',height='+ split[1] +',toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes');

	return false;
};

前回同様、head 内で読み込み、ポップアップしたいリンクを普通にリンクした後、class=”popup” を追加します。

で、ここからが前回と違うところ。活目。

ウィンドウ01

rel がついてますな。
そう、JSファイル内でウインドウサイズを指定していたのをHTML側で rel を用いて指定しているんです。litebox みたなノリです。
rel=”300,500″ で横300、縦500のウインドウがポップアップで開きます。

こんな感じで各ポップアップリンクに個別にウインドウサイズを指定できるようになりました。

5 件のコメント

  • こんにちは。
    WPとかモバイルとか色々参考にさせていただいてます。

    ところで件のシングルクォートですが、記事内のソースは半角になってるみたいですがリンクされてるファイルの方は全角のままでしたよ〜。
    一応ご一報までに。

  • こんにちは。コメントありがとうございます。
    そしてダウンロードファイル確認しましたところ、全角一杯でした。
    もぉ恥の上塗り。穴があったら埋め立てられれば良いのに。
    即座に修正しました。ご報告ありがとうございましたぁ。

  • はじめまして。
    xhtmlへでポップアップが構文エラーになってしまうので、
    どうしたものかと困ってこちらのサイトにたどり着きました。
    とても便利なファイルに感激しております。
    さっそく使用してみたところ
    Win IE(6と7)Firefox(2)は見事にポップアップになったのですが
    Opera、NetScapeがポップアップにならずにページ遷移してしまいました。
    まったく知識不足でどうしたら解決だきるのか分からず
    こちらにコメントさせて頂きました。
    もしお時間ありましたらお返事いただけると嬉しいです。

  • こんにちは。コメントありがとうございます。
    お褒めいただき恐縮です。うちのプログラマも喜ぶと思います。ありがとうございます。
    さて、Opera、NetScapeがポップアップしない、ということですが、こちらがOpera9.62とNetScape9で試したところ、通常動作しました。よろしければ、Opera、NetScapeのバージョンを教えてください。
    よろしくお願いします。

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    CAPTCHA