最近のほとんどのブラウザーにはポップアップ ブロッカーがあるため、ポップアップ ウィンドウの代わりに要素を使用して同じ効果を実現することを好みます。div「ポップアップ」では、それをブロックするものは何もありません。
まず、HTML コードに div を含める必要があります。どこでもいいです。これは、コンテンツが表示される領域です。id タグが必要です (この場合は「popup」)
<div id='popup' style='visibility: hidden; position: absolute; width: 500px; height: 300px;'></div>
次に、ページを要求してサーバーからの応答を受け取る JavaScript コードが必要です。これは私の標準機能です:
function get_(url, func)
{
var http;
try { http = new XMLHttpRequest(); } catch (e) { try { http = new ActiveXObject(\"Msxml2.XMLHTTP\"); } catch (e) { try { http = new ActiveXObject(\"Microsoft.XMLHTTP\"); } catch (e) { alert(\"Failed to load!\"); return false; } } }
http.open(\"GET\", url, true);
http.onreadystatechange = function() { if(http.readyState == 4) { func(http); } }
http.send(null);
}
この例では、コードの使用方法を確認できるように、ポップアップを機能させるボタンだけを用意します。ここにすべてがまとめられています:
<html>
<head>
<script language='javascript'><!--
function get_(url, func)
{
var http;
try { http = new XMLHttpRequest(); } catch (e) { try { http = new ActiveXObject(\"Msxml2.XMLHTTP\"); } catch (e) { try { http = new ActiveXObject(\"Microsoft.XMLHTTP\"); } catch (e) { alert(\"Your browser broke!\"); return false; } } }
http.open(\"GET\", url, true);
http.onreadystatechange = function() { if(http.readyState == 4) { func(http); } }
http.send(null);
}
function getPopup()
{
get_("url_of_popup_source.html", showPopup);
}
function showPopup(h)
{
var p = document.getElementById("popop");
p.innerHTML = h.responseText;
p.style.visibility = "visible";
}
function hidePopup()
{
p.style.visibility = "hidden";
}
--></script>
</head>
<body>
<button onClick='showPopup();'>Click here</button>
<div id='popup' style='visibility: hidden; position: absolute; width: 500px; height: 300px; top:100px; left:200px;'></div>
</body>
</html>
これは明らかに非常に基本的なことです。ポップアップのサイズと絶対位置も調整できます。しかし、主な考え方は、とにかくブロックされる可能性があるため、ユーザーに情報を取得するために実際のポップアップ ウィンドウを使用しなくなったことです。
私が含めた追加機能「hidePopup」は、ポップアップを閉じます。「url_of_popup_source.html」ソースに、クリック時に hidePopup を実行するボタンを含めることをお勧めします。そうすれば、ユーザーは情報を読んでから、ダイアログ ボックスのようにポップアップを閉じることができます。