How to align a pop up division to center of monitor/screen using javascript?
I tried using screen.width and screen.height to get center. But the division gets aligned to center of scrolling page vertically
Thanks in advance for any help and suggestions
Try this:
<div id=popup class=popup>
This a vertically and horizontally centered popup.
</div>
<a onclick=showPopup('popup');>Show Popup</a>
<style type=text/css>
.popup {
width:200px;
height:100px;
position:absolute;
top:50%;
left:50%;
margin:-50px 0 0 -100px; /* [-(height/2)px 0 0 -(width/2)px] */
display:none;
}
</style>
<script type=text/javascript>
function showPopup(id) {
var popup = document.getElementById(id);
popup.style.display = 'block';
}
</script>
CSS explained:
The div is 200x100, you position it 50% from the top and 50% from the left, but to have it centered fully, you need to substract from that 50% values the half of the width and height, the way to do this is to use negative margins, hence margin-top should be the negative value of the height/2 and margin-left should be the negative value of the width/2.
