#どうも7noteです。ポップアップウィンドウの作り方
ポップアップを開いたまま、サイトの閲覧を継続してもらいたいなら、
ポップアップを別ウィンドウで開くように設定してみましょう。
最近のwebサイトのポップアップは全て閲覧中のウィンドウの真ん中に出るので
ポップアップを消さないと閲覧を続行できません。
別タブで開くと、同様にタブを切り換えないと両方の情報を同時に見ることができません。
古典的な方法ですが、javascriptを使ってリンク先を専用の別ウィンドウでポップアップ表示させる方法を紹介します。
最近めっきりみなくなったので備忘録的に記事に残します
（スマホが主流の時代なんで、別ウィンドウで開くはあんまり使われないかもですが。。。）
ポップアップウィンドウの表示方法
index.html
<a href="javascript:void(0);" onclick="window.open('{リンク先URL}','{ウィンドウ名}','{ウィンドウ設定}');return false;">別ウィンドウを開く</a>
<!-- 入力例 -->
<a href="javascript:void(0);" onclick="window.open('http://hoge-hoge.com/window/','window1','width=500,height=300');return false;">別ウィンドウを開く</a>
解説
window.open()で開いたウィンドウはタブ分けやブックマーク、拡張機能などのメニューなしで開かれます。
ウィンドウ設定の箇所で表示位置や大きさを変更することが可能です。
（top,left,width,hright等）
ちなみにスマホの場合は単純に別タブで開かれます。ウィンドウの概念がないため。
まとめ
PC表示の時しか使わない手法ですが、「別ウィンドウで情報を確認しながら入力フォームに情報を入力してもらう」みたいに使いどころはあるかなと思います。
javascriptといっても難しい計算や処理を入れていないので、普段javascriptに触れていない方でも簡単に実装が可能です。
おそまつ！
~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ