Creating a simple javascript Popup Div
Sometimes you want to create a div in your document that opens a pop-up window that shows another webpage, but that isn’t actually another browser window. The code below will do just that for you in a simple manner. You can change the page that shows in the popup by simply changing the “src” from “http://google.com” to whatever page you want to display.
place the following code in the body of your html page:
<div class=”popUp”>
<iframe src=”http://google.com”></iframe><br>
<button onclick=”this.parentNode.parentNode.removeChild(this.parentNode);”>
Close
</button>
</div>
place the following code either in your css style sheet, or between <style></style> tags in the head of your html document:
.popUp { position: absolute; top: 1000px; left: 200px; text-align: center; padding: 5px; border: 1px solid black; background: white; }
place the following code in the head of your document:
<script>
function createPopUp(popUpCode) { var div = document.createElement(‘div’); div.innerHTML = popUpCode; document.body.appendChild(div.firstChild); }
</script>
Tags: javascript