Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to center align pop up div using Javascript

Tags:

javascript

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

like image 794
Parag Avatar asked Jul 08 '10 10:07

Parag


1 Answers

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.

like image 127
agbb Avatar answered Oct 06 '22 15:10

agbb