[ プログラミング ] jQueryで小窓(ポップアップウィンドウ)を出す方法

小窓(ポップアップウィンドウ)を出す方法を調べることがありましたのでメモです。

デモはこちらから。

DOMO

HTML5で記述しています。jQueryもHTMLファイルに記述しています。今回は、特にCSSの設定はしていません。

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQueryで小窓(ポップアップウィンドウ)を出す方法</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
$(function() {
    $(".popup").click(function(){
        // ウィンドウサイズ
        var ws = 940;
        var hs = 500;

        // 画面よりウィンドウサイズが大きい場合の縮小率
        var wr = 0.6;
        var hr = 0.6;

        if(ws > screen.availWidth) {
            ws = screen.availWidth * wr;
        }
         if(hs > screen.availHeight) {
            hs = screen.availHeight * hr;
        }

        // ウィンドウを中央寄せ
        var w = ( screen.availWidth - ws ) / 2;
        var h = ( screen.availHeight - hs ) / 2;

        window.open(this.href,"window","width= "+ ws + ",height=" + hs + ",left=" + w + ",top=" + h + ", location = no ,toolbar = no, menubar = no, status = no");

        return false;
    });
});
</script>
<style>
</style>
</head>
<body>
<p><a href="window.html" class="popup">ポップアップします。</a></p>
</body>
</html>

任意でポップアップウィンドウのサイズを指定して、それを画面の中央に配置しています。が正確な真ん中ではないです。サイズ指定できるのは、Webページ領域のみで、アドレスバーとかは一応、非表示設定していますが、ブラウザによっては強制的に表示されてしまうものもあります。あと、アドオンバーも表示されてしまいます。その分の領域分はサイズ取得ができないので、正確な中央寄せができません。

あと、画面よりも大きいポップアップウィンドウを設定してしまった場合、サンプルの場合は、0.6倍の大きさになるように変更しています。一応、画面より大きいポップアップウィンドウの場合はブラウザ側で自動的に画面と同じサイズに変換してくれるようにはなっています。

ちなみに『screen.availHeight』は画面からPCのタスクバー分を差し引いた領域になります。