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.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

Worepressのロゴ、ボタン、カラースキームなどの公式データをメモ

この記事は約 1 分で読めます。 WordPressのロゴ、ボタン、カラースキームなど、公式データがダウンロード出来るようになっていたので、メモ。 ちゃんと、あったんですね!!しかも、かなり種類が豊富 …

no image

WordPressプラグイン「Easing Slider」でスライドショー簡単設置

この記事は約 1 分で読めます。 WordPressでカッコいいスライドショーを簡単に実現出来るプラグイン「Easing Slider」があったので、メモしておきます。 有料版もあるようですが、無料版 …

no image

thickbox.jsを使ってLightBox風モーダルウィンドウにチャレンジ♪

この記事は約 1 分で読めます。今回も、数枚の画像を効果的に見せる方法にチャレンジしたいと思います。 ・・・で、画像をクリックすると大きな画像を表示させることが出来るLightBox風にしたいなぁって …

no image

苦手なJavaScriptをイチから勉強してみる【JavaScriptを外部ファイルにする】

この記事は約 1 分で読めます。 苦手なJavaScriptをイチから勉強してみる【関数編】の続きとしてメモします。 イチから「JavaScript」を学び直しをする為に記録を残しています。少しずつメ …

WordPress 「Contact Form7」でエラーメッセージが出たときに確認したこと

この記事は約 1 分で読めます。 「Contact Form7 4.4」をバージョンアップした途端、エラーメッセージが出るようになりました。 エラーメッセージが出たことで、再度設定を見直すキッカケがで …