Решение проблем связанных с созданием веб сайтов на языках разметки гипертекстов css, html.

Плавное открытие и плавное закрытие всплывающего окошка средствами Css + Java Script

Вопрос

Здравствуйте!
Как зделать так, чтобы при нажатии на ссылку всплывало окно, которое не просто появлялось сразу же откытым, а потихоньку открывалась как кулисы в театре?
Буду очень признательна если вы мне поможите …

Ответ

Показываю на примере взятого с известного форума тигр.ком:
В данном примере окошко будет разворачиваться по горизонтале, скорость отрытия, размеры окна и т.д… можно будет легко изменять в зависимости от ваших потребностей…… :

Для начала мы создадим следующие стили Css:

<style type=”text/css”>
#dialogWindow {/* Настраиваем внешний вид слоя */width: 300px; /* шириша слоя диалогового окна */
height: 200px; /* высота слоя диалогового окна */
background-color: #FFFFCC; /* цвет слоя диалогового окна */
border: 1px dotted gray; /* рамка слоя диалогового окна*//* Позиционируем слой по центру */position: absolute; /* устанавливаем абсолютное позиционирование */
left: 50%; /* устанавливаем верхний левый угол слоя по горизонтали по центру страницы */
top: 50%; /* устанавливаем верхний левый угол слоя по вертикали по центру страницы */
margin-top: -100px; /* сдвигаем слой вверх на половину высоты слоя */
margin-left: -150px; /* сдвигаем слой влево на половину ширины слоя *//* делаем слой невидимым */clip: rect(auto 150px auto 150px); /* свойство clip подробно рассмотрим ниже (оно ключевое) */
}/* заголовок диалогового окна */.dTitle {
font-weight: bold;
margin: 0;
padding: 5px;
background-color: #CCFFFF;

Страницы: 1 2 3