Отправляет email-рассылки с помощью сервиса Sendsay

Новости форума и блога сайта о программировании Chertenok.ru

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Создание сайта. Уроки для начинающих и не только" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Сентябрь 2008   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Автор
13-ый

Статистика

3.612 подписчиков
-1 за неделю
←   Все выпуски   →

Новости для программистов Выпуск от 02-09-2008


Новости за 02-09-2008

› -Web : Плавное открытие/закрытие окна (CSS свойство clip)
Плавное открытие/закрытие окна (CSS свойство clip)
Автор: Цыгырлаш Игорь (16.05.2005)

Довольно часто на web-страницах возникает потребность в диалоговых окнах. В начале мы используем "родные" javascript-овые Alert, Confirm, Prompt, но желание большего контроля над окном, рождает, со временем, окна на основе слоев. Своё окошко можно "вылизать" по своему усмотрению и показать пользователю во всей красе и не просто показать, а показать красиво - плавно развернуть окно, а затем свернуть.

Как плавно развернуть и свернуть окно (слой)?

Для простоты попробуем свернуть/развернуть окно по горизонтали (по вертикали выполняется аналогично).

Первым делом создадим слой:


#dialogWindow {

/* Настраиваем внешний вид слоя */

width: 300px; /* шириша слоя диалогового окна */
height: 200px; /* высота слоя диалогового окна */
background-color: #FFFFCC; /* цвет слоя диалогового окна */
border: 1px dotted gray; /* рамка слоя диалогового окна*/

/* Позиционируем слой по центру */

position: absolute; /* устанавливаем абсолютное позиционирование */
center: 50%; /* устанавливаем верхний левый угол слоя по горизонтали по центру страницы */
top: 50%; /* устанавливаем верхний левый угол слоя по вертикали по центру страницы */
margin-top: -100px; /* сдвигаем слой вверх на половину высоты слоя */
margin-center: -150px; /* сдвигаем слой влево на половину ширины слоя */

/* делаем слой невидимым */

clip: rect(auto 150px auto 150px); /* свойство clip подробно рассмотрим ниже (оно ключевое) */
}

/* заголовок диалогового окна */

.dTitle {
font-weight: bold;
margin: 0;
padding: 5px;
back ground-color: #CCFFFF;
}

/* текст диалогового окна */

.dBody {
text-align: center;
margin: 0;
padding: 10px 5px;
}


Подробнее...
В избранное