Как сделать всплывающее окно по центру экрана?

[jslgogo]

Подскажите, как сделать всплывающее окно по центру экрана?
Окно должно появляться при нажатии на ссылку, по центру экрана.
Страница может быть длинной, но где бы пользователь не нажал на ссылку, окно всегда появится по центру его экрана. Не по центру страницы, а по центру экрана пользователя.

[Erolast]

https://www.google.com/search?q=java...�ое+окно

[Demath]

jslgogo,
Для одной ссылки одно окно или для нескольких ссылок разные окна?

[jslgogo]

Для одной ссылки одно окно

[Demath]

Такое окно?

<div class="postbody">Lorem ipsum dolor sit amet <a id="a1" href="#">всплывающее окно</a>, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

<script>
window.onload = function(){
        
    function clientWidth(){ // Ширина окна просмотра
     return document.compatMode=='CSS1Compat' && !window.opera ? document.documentElement.clientWidth : document.body.clientWidth;
    }
    function clientHeight(){ // Высота окна просмотра
     return document.compatMode=='CSS1Compat' && !window.opera ? document.documentElement.clientHeight : document.body.clientHeight;
    }
    
    document.getElementById('a1').onclick = function(){
      if ( !document.getElementById('okno1') )
      { var okno = document.createElement('div'),
            oknoWidth = 350,
            oknoHeight = 100;
        okno.id = 'okno1';
        okno.style.position = 'fixed';
        okno.style.left = (clientWidth() - oknoWidth) / 2 + 'px';
        okno.style.top  = (clientHeight() - oknoHeight) / 2 + 'px';
        okno.style.width  = oknoWidth + 'px';
        okno.style.height = oknoHeight + 'px';
        okno.style.zIndex = '999';
        okno.style.boxSizing = 'border-box';
        okno.style.padding = '10px';
        okno.style.borderRadius = '7px';
        okno.style.background = 'rgba(237, 255, 238, 0.9)';
        okno.style.boxShadow  = '0 0 10px rgba(0, 0, 0, 0.5)';
        okno.innerHTML = '<div onclick="this.parentNode.parentNode.removeChild(this.parentNode)" title="Закрыть" '
                               +'style="position: absolute; top: 0; right: 8px; cursor: pointer; '
                               +'font: 28px/1 Arial; color: red;">×</div>'
                         +'<div style="text-align: center;">Всплывающее окно</div>';
        document.body.appendChild(okno);
      }
      return false;
    };

};
</script>

[BETEPAH]

Если размеры блока известны, то проще всего так:

.popup--centered {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 100px;
  height: 100px;
}

Если не известны или нужен еще оверлейный слой, то как-то так

<style>
.popup--centered_overlay {
    text-align: center;
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.2);
  }
  .popup--centered_overlay::before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
  .popup--centered {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    text-align: left;
  }
</style>
<div class="popup--centered_overlay">
    <div class="popup--centered">Блок по центру страницы</div>
</div>

[jslgogo]

Demath - да, такое окно. Но, при выводе множества ссылок, окно не работает.
Т.е. вывожу ссылки в цикле (php). Первая ссылка показывает окно, остальные нет (странно, код ссылок то один).
Я хотел, чтобы любая ссылка выводила окно по центру экрана.

[Demath]

Для одной ссылки одно окно

Demath - да, такое окно. Но, при выводе множества ссылок, окно не работает.
Т.е. вывожу ссылки в цикле (php). Первая ссылка показывает окно, остальные нет (странно, код ссылок то один).
Я хотел, чтобы любая ссылка выводила окно по центру экрана.

надо бы определиться, что именно нужно.

То есть для всех ссылок на странице должно всплывать одно и тоже окно?

<div class="postbody">Lorem ipsum dolor <a id="a1" href="#">sit amet</a>, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <a id="a1" href="#">quis nostrud</a> exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia <a id="a1" href="#">deserunt mollit anim</a> id est laborum.</div>

<script>
window.onload = function(){
        
    function clientWidth(){ // Ширина окна просмотра
     return document.compatMode=='CSS1Compat' && !window.opera ? document.documentElement.clientWidth : document.body.clientWidth;
    }
    function clientHeight(){ // Высота окна просмотра
     return document.compatMode=='CSS1Compat' && !window.opera ? document.documentElement.clientHeight : document.body.clientHeight;
    }
    
    var a = document.getElementsByTagName('a'),
        n = a.length;

    while (n--)
    {  a[n].onclick = function(){
        if ( !document.getElementById('okno1') )
        { var okno = document.createElement('div'),
              oknoWidth = 350,
              oknoHeight = 100;
          okno.id = 'okno1';
          okno.style.position = 'fixed';
          okno.style.left = (clientWidth() - oknoWidth) / 2 + 'px';
          okno.style.top  = (clientHeight() - oknoHeight) / 2 + 'px';
          okno.style.width  = oknoWidth + 'px';
          okno.style.height = oknoHeight + 'px';
          okno.style.zIndex = '999';
          okno.style.boxSizing = 'border-box';
          okno.style.padding = '10px';
          okno.style.borderRadius = '7px';
          okno.style.background = 'rgba(237, 255, 238, 0.9)';
          okno.style.boxShadow  = '0 0 10px rgba(0, 0, 0, 0.5)';
          okno.innerHTML = '<div onclick="this.parentNode.parentNode.removeChild(this.parentNode)" title="Закрыть" '
                               +'style="position: absolute; top: 0; right: 8px; cursor: pointer; '
                               +'font: 28px/1 Arial; color: red;">×</div>'
                           +'<div style="text-align: center;">Всплывающее окно</div>';
          document.body.appendChild(okno);
        }
        return false;
       };
    }
};
</script>

[skrudjmakdak]

Demath, зачем писать то что есть?

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <script>
  $(function() {
    $( "#dialog" ).dialog();
  });
  </script>
</head>
<body>
 
<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
 
 
</body>
</html>

а вот ссылки http://jqueryui.com/dialog/
http://jqueryui.com/dialog/#animated
http://jqueryui.com/dialog/#modal-confirmation
http://jqueryui.com/dialog/#modal-form
http://jqueryui.com/dialog/#modal-message