Fix the iframe popup at the center of the screen

Question

I need to display the popup message when the page load. I am getting the popup when the page loads. But the problem is it comes to the center of the page. if the page is bigger the popup goes down. I want the popup should be always center to the screen.

How to fix the popup in a particular location?

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
  <script>
  $(function() {  
    $( "#dialog" ).dialog({
      width : 700,
      height : 400,
      modal: true   
    });   
  });
  </script>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Dialog - Default functionality</title>
 

</head>
<body>
<div id="dialog" style="display:none;" title=" ">
  <iframe frameborder="0" scrolling="no" width="670" height="350" src="popUp.html"></iframe>
</div>
</body>
</html>

[It can help you](http://stackoverflow.com/questions/8764399/how-to-position-the-div-popup-dialog-to-the-center-of-browser-screen) — Pedram, Nov 18 '15 at 10:49
It's better with translate, because you don't need to know the size of the box. See my answer. — Marcos Pérez Gude, Nov 18 '15 at 10:53

score -1 · Answer 1 · answered Nov 18 '15 at 10:52

To center an absolute/fixed div perfectly in all situations, without javascript and resize events that loads CPU a lot, you can use css translate:

    .modal {
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%); /* IE 9 */
        -webkit-transform: translate(-50%, -50%); /* Safari iOS */
        transform: translate(-50%, -50%); /* Rest of browsers */
      
        background-color: black;
        width: 100px;
        height: 100px;
    }

<div class="modal"></div>

Fix the iframe popup at the center of the screen

1 Answers1