Webの記録

別窓でリンク先のページをポップアップで開きたいとき

投稿日:

この記事は約 3 分で読めます。

window

よくリンク設定で、「target=”_blank”」を入れて別タブで開くようにすることは多いですが・・・。

今回、たまたまポップアップでリンク先のページを表示することになって、思い出せなかったのでメモです。

多分滅多に使うことはないと思うけれど・・・。

javascriptを使って、開く方法を試してみました。

【修正・加筆しています】



ポップアップでリンク先のページを表示する方法。

今回の表示条件
  • 別窓でリンク先のページを表示する
  • 開いているページは移動させない
  • ウィンドウサイズは指定する
  • スクロールバーをつける
  • ウィンドウのサイズを可変できるようにする


別窓のサンプルページ


javasciptをheadの中に書いてみる

以下のコードをheadの中に書きました。widthとheightは数値は、別窓のサイズです。

<script language="JavaScript" type="text/javascript">
<!--
function openWin(){
会社概要 = window.open("別窓で開くURL","会社概要","width=960,height=600,scrollbars=yes,status=no,toolbar=no,location=no,menubar=no,directories=no,resizable=yes");
会社概要.focus();
}
//-->
</script>


リンク情報を書いてみる

通常リンク同様にのaタグを書きます。その中に以下のような文を入れます。

この分は、複数行あっても大丈夫です。

<a href="javascript:void(0);" onclick="openWin()">リンクしたい文字や画像</a>


これで別窓(ポップアップ)で、リンク先のページを表示させることができるようになりました。

複数、別窓でリンクしたい時は「openWin()」の名前を変えると複数対応できます。私は「openWin1()」「openWin2()」のようにしてみました。


便利サイト

表示する条件はもっと細かく設定できます。その記述が分からない場合、必要な項目にチェックや入力をするだけで簡単にjsを書き出してくれるサイトがありました。

サイズ等を決めて新しいウィンドウを開く|WEB上手さま

とても便利で助かりました!ありがとうございます!!


参考にさせて頂いたサイト

-Webの記録
-, ,

執筆者:


comment

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

This blog is kept spam free by WP-SpamFree.

関連記事

no image

LIghtBox風画像ギャラリーを「ColorBox」で作ってみた♪

この記事は約 1 分で読めます。LightBoxのように、画像を拡大表示出来るjQueryプラグインを探してみました。 たくさんLightBox風のライブラリはありましたが、今回は「ColorBox」 …

no image

WordPressテンプレートタグをメモ。【header編】

この記事は約 1 分で読めます。WordPressを理解したくて、いろいろなサイトや本を見ながら勉強しています。 今回、オリジナルテーマ作りをしています。 いろいろなテンプレートタグが出てくるので、ち …

no image

レスポンシブサイト制作にチャレンジ。

この記事は約 1 分で読めます。最近、気になっているのが「レスポンシブWebサイト」。 1つのHTMLで、スマートフォンやタブレットなど小さな画面とパソコンなどの大きな画面で見た場合と見た目を切り替え …

no image

WordPress 「この記事は●分で読めます」をプラグインなしで表示させたい時

この記事は約 1 分で読めます。 よく他の方のブログで記事の冒頭に「この記事は●分で読めます」という表示がされているのを見かけます。 これがあると、その記事を読むかブックマークするかを判断出来て便利だ …

no image

右クリックで独自メニューを出して画像のコピーガード

この記事は約 1 分で読めます。 画像のコピーガードを3通り試しています。 今回は「右クリックで独自メニューを出す」方法を試してみました。 「右クリック禁止で画像のコピーガード」、 「透明画像を置いて …