【window.open】JavaScriptを使ってブラウザサイズ指定し別ウィンドウのページを開く

【window.open】JavaScriptを使ってブラウザサイズ指定し別ウィンドウのページを開く

過去にモーダルでページ内にポップアップ表示させる方法「JavaScriptでモーダル表示する方法【プラグイン、jQuery不使用】」をご紹介しましたが、
今回はページ内では無くブラウザサイズ指定して別ウィンドウでページを開いてみます。

別ウィンドウを表示させるクリックボタンのCSS記述

※ここは重要では無いので必要に応じて書き換えてください。

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"MS Pゴシック",Arial,sans-serif;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  line-height: 1.8em;
  text-align: center;
}
h1{
  font-size:26px;
  text-align:center;
  font-weight:normal;
  padding:10px 0 20px 0;
  line-height: 1.2em;
}
.clk{
  width: 200px;
  height: 50px;
  margin: 0 auto;
  background-color: #cccccc;
  font-weight: bold;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
}
</style>

別ウィンドウを表示させるクリックボタンのHTML記述

※クリックボタンはonclickでwopn()関数を呼びます。


<h1>以下をクリックすると幅500px、高さ500pxのページが別ウィンドウで開きます。</h1>
<br>

<div class="clk" onclick="wopn()">ここをクリック</div>

別ウィンドウを表示するJavaScript記述

※クリックすると幅500px、高さ500pxのページ(https://dad-union.com/)が別ウィンドウで開きます。
 「windowname」は任意のウィンドウ名を指定します。この名前がターゲット名になるので開いた別ウィンドウを操作したいときに指定する名前になります。

<script type="text/javascript">
function wopn() {
    window.open("https://dad-union.com/", "windowname", "width=500,height=500");
}
</script>

デモページ

【window.open】ブラウザサイズ指定して別ウィンドウのページを開くデモ

 

※流用される場合は自己責任でお願いします。
 デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。