Создаем окна по центру экрана JQuery + css: position absolute

Создаем окна по центру экрана JQuery + css: position absolute

Для того, чтобы блок был всегда по центру экрана, надо задать ему css стиль со следующими параметрами:

.blockcentr {
background: #ccc;
width: 320px;
position: absolute;
left: 50%;
margin-left: -160px; /* отрицательный отступ равный 1/2 ширины (width) позиционируемого блока */
}

Данное правило работает только в том случае, если ширина блока задана статично, т.е., как в данном случае - 320 px.

Пример: нажмите на ссылку, чтобы открыть окно.

Открыть окно


А теперь бонус! =)

Вы можете скачать код рабочего примера данного окна

Также можете сразу просмотреть код в живую ниже:

<a href='#' class="openokno">Открыть окно</a>
<div class="blockcentr" style="display: none">
<b>Чтобы окно было по центру:</b><br /> width: 320px, а margin-left: отрицательный, равный половине ширины.
Нажмите на закрыть, чтобы скрыть окно.
<a href='#' class="openokno">Закрыть</a></div>

<style>
.blockcentr {
width: 320px;
position: absolute;
left: 50%;
margin-left: -160px;
background: #FFE7E7; padding: 15px; line-height: 25px; border-radius: 15px; border: 1px solid #A5A5A5; z-index: 999}
</style>

<script type="text/javascript">
$(document).ready(function(){
$(".openokno").click(function(){
$(".blockcentr").slideToggle("2000");
}); });
</script>

| | Создаем окна по центру экрана JQuery + css: position absolute | Для того, чтобы блок был всегда по центру экрана, надо задать ему css стиль со следующими параметрами: .blockcentr { background: #ccc; width: |

Один комментарий на “Создаем окна по центру экрана JQuery + css: position absolute”

  1. Olexandr:

    Отличная работа!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *


Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>