Blog

HOME > Web > javascript > 【javascript】ポップアップと開閉スクリプトについて

【javascript】ポップアップと開閉スクリプトについて

2016/01/29

javascript

あまりポップアップやエリアを開閉することがないので、
ほとんど忘れていますが、たまに例えばプライバシーポリシーなどを別枠表示したいという要望があります。

その都度、本を開いたり参考サイトを見たりしているので、
ここでまとめたいと思います。

開閉スクリプト

参考サイト
Javascript 開閉スクリプト

１．Javascriptコードを埋め込む
間でも構いませんが
必須のコードではなくページの表示速度を考慮して
footerの直前でも問題ありません。

<!-- JS開閉スクリプト -->
<script type="text/javascript"><!-- function box(id){if(document.all)OBJ = document.all(id).style; else if(document.getElementById)OBJ = document.getElementById(id).style; if(OBJ) OBJ.display=='none'?OBJ.display='':OBJ.display='none';} //--></script>

２．ページに「クリックする項目」と「表示させる内容」を入れる
「クリックする項目」をクリックすると
「表示させる内容」が開閉する


<div onclick="box('AA')">クリックする項目</div>


<div style="display:none" id="AA">開閉させる内容</div>

（追加する場合）


<div onclick="box('BB')">クリックする項目２</div>


<div style="display:none" id="BB">表示させる内容２</div>

box('AA')がid="AA"を開くので
AAの表示を変更すれば複数設置可能だが
box('★')とid="★"は一致させる必要がある

ポップアップで開く

参考サイト
新しいウィンドウをサイズ指定して開く

新しいウィンドウをサイズ指定して開く

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>サンプル</title>
<script type="text/javascript">
<!-- function openwin() { window.open("./window.html", "", "width=500,height=400"); } // -->
</script>
</head>
<body>
<a href="javascript:openwin();">新しいウィンドウ</a>
</body>
</html>

直接使用する場合

<a href="./window.html" onclick="window.open('./window.html', '', 'width=500,height=400'); return false;">新しいウィンドウ</a>

スクロールバーを表示

<a href="./window.html" onclick="window.open('./window.html', '', 'width=500,height=400,scrollbars=yes'); return false;">新しいウィンドウ</a>

フォームの場合


<form action="#">
<input type="button" value="ジャンプ" onclick="window.open('./window.html', '', 'width=500,height=400');">
</form>

自分でも忘れないように参考にします。

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ