トップ > Javascriptサンプル

Javascriptは、ブラウザの種類やバージョン、環境により機能するものとしないものがあります。
また、DHTMLを使用している場合もあります。
DHTMLについては「DHTMLサンプル」もご参照下さい。

■ 外枠のみのウィンドウ(ポップアップウィンドウ)

ここのページを開くと外枠のみの新しいウィンドウを自動的に新しいウィンドウで表示します。
このような、ウィンドウをpopup(ポップアップ)ウィンドウと言います。

そのウィンドウを自動で呼び出す場合、リンクで開く場合、ボタンで開く場合などがあります。

◆ 実行サンプル

略号の説明 動作が確認できたブラウザ
IE6.0 NS7.0 MZ1.7.7 FF1.5 OP7.53

【記述サンプル】

【自動オープンタイプ】(ページを開くと同時に新しいウィンドウを開く)
HEAD句内に次のようなJavascriptを記述します。
<script language="javascript">
<!--
window.open('wcloseb.html', "popup3", "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, close=yes, width=480, height=400");
// -->
</script>

【記述サンプル】

【リンクでオープンする方法1】)
まず、テキストエディタなどを使用し、次の記述を「window00.js」というファイル名で保存します。
function wopen1(winnam){
window.open(winnam, "popup3", "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, close=yes, width=480, height=400");
return false;
}

次に、AタグJavascriptの呼び出しを次のように記述します。
<a href="javascript:wopen1('wcloseb.html')">外枠のみのウィンドウをリンクで開く1</a>


【リンクでオープンする方法2】)
AタグJavascriptの呼び出しを次のように記述します。
<a href="javascript:" onclick="wopen1('wcloseb.html')">外枠のみのウィンドウをリンクで開く2</a>


【リンクでオープンする方法3】)
AタグJavascriptの呼び出しを次のように記述します。
<a href="#" onclick="return wopen1('wcloseb.html')">外枠のみのウィンドウをリンクで開く3</a>

【記述サンプル】

【ボタンでオープンする方法】)
まず、テキストエディタなどを使用し、次の記述を「window00.js」というファイル名で保存します。
function wopen1(winnam){
window.open(winnam, "popup3", "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, close=yes, width=480, height=400");
return false;
}


次に、HEAD句内Javascriptの呼び出しを次のように記述します。
<input type="button" onclick="wopen1('wcloseb.html')" value="ボタンで開く" class="btn" accesskey="o" tabindex="1">



page update:2010/01/23 20:32

Copyright (c) 2000-2009, all Rights Reserved & Produced by atom