Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.08.2014, 08:27
Новичок на форуме
Отправить личное сообщение для jslgogo Посмотреть профиль Найти все сообщения от jslgogo
 
Регистрация: 24.08.2014
Сообщений: 3

Как сделать всплывающее окно по центру экрана?
Подскажите, как сделать всплывающее окно по центру экрана?
Окно должно появляться при нажатии на ссылку, по центру экрана.
Страница может быть длинной, но где бы пользователь не нажал на ссылку, окно всегда появится по центру его экрана. Не по центру страницы, а по центру экрана пользователя.
Ответить с цитированием
  #2 (permalink)  
Старый 24.08.2014, 11:43
Аватар для Erolast
Профессор
Отправить личное сообщение для Erolast Посмотреть профиль Найти все сообщения от Erolast
 
Регистрация: 24.09.2013
Сообщений: 1,435

https://www.google.com/search?q=java...ое+окно
Ответить с цитированием
  #3 (permalink)  
Старый 24.08.2014, 12:53
Аватар для Demath
Профессор
Отправить личное сообщение для Demath Посмотреть профиль Найти все сообщения от Demath
 
Регистрация: 22.06.2012
Сообщений: 168

jslgogo,
Для одной ссылки одно окно или для нескольких ссылок разные окна?
Ответить с цитированием
  #4 (permalink)  
Старый 24.08.2014, 15:21
Новичок на форуме
Отправить личное сообщение для jslgogo Посмотреть профиль Найти все сообщения от jslgogo
 
Регистрация: 24.08.2014
Сообщений: 3

Для одной ссылки одно окно
Ответить с цитированием
  #5 (permalink)  
Старый 24.08.2014, 15:29
Аватар для Demath
Профессор
Отправить личное сообщение для Demath Посмотреть профиль Найти все сообщения от Demath
 
Регистрация: 22.06.2012
Сообщений: 168

Такое окно?

<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>

Последний раз редактировалось Demath, 25.08.2014 в 09:23. Причина: опечатка
Ответить с цитированием
  #6 (permalink)  
Старый 24.08.2014, 15:43
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

Если размеры блока известны, то проще всего так:
.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>
Ответить с цитированием
  #7 (permalink)  
Старый 26.08.2014, 06:15
Новичок на форуме
Отправить личное сообщение для jslgogo Посмотреть профиль Найти все сообщения от jslgogo
 
Регистрация: 24.08.2014
Сообщений: 3

Demath - да, такое окно. Но, при выводе множества ссылок, окно не работает.
Т.е. вывожу ссылки в цикле (php). Первая ссылка показывает окно, остальные нет (странно, код ссылок то один).
Я хотел, чтобы любая ссылка выводила окно по центру экрана.
Ответить с цитированием
  #8 (permalink)  
Старый 26.08.2014, 07:54
Аватар для Demath
Профессор
Отправить личное сообщение для Demath Посмотреть профиль Найти все сообщения от Demath
 
Регистрация: 22.06.2012
Сообщений: 168

Сообщение от jslgogo
Для одной ссылки одно окно
Сообщение от jslgogo
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>
Ответить с цитированием
  #9 (permalink)  
Старый 26.08.2014, 08:18
Профессор
Отправить личное сообщение для skrudjmakdak Посмотреть профиль Найти все сообщения от skrudjmakdak
 
Регистрация: 27.04.2012
Сообщений: 1,410

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
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Всплывающее окно Rooner jQuery 1 23.04.2014 12:15
filter(this,this) как правильно сделать? Smip jQuery 5 23.02.2013 01:07
как сделать ось У по центру? Женя150 jQuery 1 18.11.2012 23:43
Как сделать загрузку изображения аля вконтакте? OklickSpb Общие вопросы Javascript 4 31.03.2012 16:12
Как сделать такое fancy menu uonax Элементы интерфейса 2 22.05.2010 11:52