My preferred method to replace popup windows is using a div element instead. This eliminates any issues with popup blockers in modern browsers. With a div "popup," there are no barriers.
To start, you must include the div in your HTML code. It can be placed anywhere on the page as it will serve as the area where your content appears. Make sure to assign an id tag (in this case, "popup") to the div.
<div id='popup' style='visibility: hidden; position: absolute; width: 500px; height: 300px;'></div>
Next, you need JavaScript code to handle requesting and receiving data from the server. Here's a basic function I use:
function fetchData(url, callback)
{
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) { callback(http); } }
http.send(null);
}
For demonstration purposes, let's have a button trigger the popup functionality so you can see how it works. Here's everything put together:
<html>
<head>
<script language='javascript'><!--
function fetchData(url, callback)
{
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) { callback(http); } }
http.send(null);
}
function openPopup()
{
fetchData("url_of_popup_source.html", displayPopup);
}
function displayPopup(response)
{
var popup = document.getElementById("popup");
popup.innerHTML = response.responseText;
popup.style.visibility = "visible";
}
function closePopup()
{
popup.style.visibility = "hidden";
}
--></script>
</head>
<body>
<button onClick='openPopup();'>Click here</button>
<div id='popup' style='visibility: hidden; position: absolute; width: 500px; height: 300px; top:100px; left:200px;'></div>
</body>
</html>
This method is straightforward. You can customize the size and position of the popup as needed. The key benefit is that you avoid using traditional popup windows, which could potentially be blocked by browsers.
I also added an additional function called "closePopup" to hide the popup. Consider adding a button in your "url_of_popup_source.html" file that triggers this function when clicked. This allows users to view the information and then close the popup similar to a dialog box.