Плавное открытие окна.
Плавное открытие окна.
Здравствуйте все. Посмотрел вот на этом сайте (http://www.tigir.com/rollunrolllayer.htm) скрипт, который разворачивает и сворачивает окно, сделал страницу. Всё работает, но окно раздвигается только по горизонтали, а мне нужно отредактировать скрипт, так что бы окно одновременно раздвигалось и по вертикали и по горизонтали. То есть окно должно расширяться во все стороны, исправьте, пожалуйста, код, я сам пробовал, у меня не получилось. Вот код страницы:
<head>
<style type="text/css">
#dialogWindow {
/* Настраиваем внешний вид слоя */
width: 600px; /* шириша слоя диалогового окна */
height: 400px; /* высота слоя диалогового окна */
background-color: #FFFFCC; /* цвет слоя диалогового окна */
border: 1px dotted gray; /* рамка слоя диалогового окна*/
/* Позиционируем слой по центру */
position: absolute; /* устанавливаем абсолютное позиционирование */
left: 30%; /* устанавливаем верхний левый угол слоя по горизонтали по центру страницы */
top: 42%; /* устанавливаем верхний левый угол слоя по вертикали по центру страницы */
margin-top: -150px; /* сдвигаем слой вверх на половину высоты слоя */
margin-left: -100px; /* сдвигаем слой влево на половину ширины слоя */
/* делаем слой невидимым */
clip: rect(auto 300px auto 300px); /* свойство clip подробно рассмотрим ниже (оно ключевое) */
}
/* заголовок диалогового окна */
.dTitle {
font-weight: bold;
margin: 0;
padding: 5px;
background-color: #CCFFFF;
}
/* текст диалогового окна */
.dBody {
text-align: center;
margin: 0;
padding: 10px 5px;
}
</style>
</style>
<script type="text/javascript">
var curtainStep = 10; //шаг - количество пикселей на которое будет сворачивать слой за один раз
var curtainTimeout = 15;//задержка перед последующей итерацией для эффекта плавности
//текущее количество обрезаемых пикселей слоя слева и справа
var curtainLeft = 300;
var curtainRight = 300;
var curtainWidth = 600;//ширина слоя
function curtainOpen()
{
if (curtainLeft>0)
{
curtainRight += curtainStep; //раскрываем область усечения справа на curtainStep пикселей
curtainLeft -= curtainStep; //раскрываем область усечения слева на curtainStep пикселей
var rect = 'rect(auto, '+ curtainRight +'px, auto, '+ curtainLeft +'px)';
document.getElementById("dialogWindow").style.clip = rect;
setTimeout(curtainOpen,curtainTimeout); //вызываем эту же функцию повторно через curtainTimeout миллисекунд
}
}
function curtainClose()
{
if (curtainLeft<curtainRight)//Пока левая граница области усечения не встретилась с правой
{
curtainRight -= curtainStep; //сужаем область усечения справа на curtainStep пикселей
curtainLeft += curtainStep; //сужаем область усечения слева на curtainStep пикселей
var rect = 'rect(auto, '+ curtainRight +'px, auto, '+ curtainLeft +'px)';
document.getElementById("dialogWindow").style.clip = rect;
setTimeout(curtainClose,curtainTimeout); //вызываем эту же функцию повторно через curtainTimeout миллисекунд
}
}
function clipImg(on)
{
document.getElementById("clipEx1").style.clip=on?'rect(78px 146px 183px 84px)':'rect(auto,auto,auto,auto)';
}
</script>
<div id="dialogWindow">
<div class="dTitle">Диалоговое окно</div>
<p class="dBody">Текст сообщения для пользователя( контент).<br>
<button style="clear:both; margin-top:30px;" type="button" onClick="curtainClose()">Закрыть окно</button></p>
</div>
</head>
<a href="javascript:curtainOpen()" class="strong">1</a>
----------------------------------------- С уважением, Антон. |
Flashton,
Вашу просьбу сделал: Стили: Изменил: clip: rect(200px 300px 200px 300px); /* добавил top и bottom */
<style type="text/css">
#dialogWindow {
/* Настраиваем внешний вид слоя */
padding-top:200px;
width: 600px; /* шириша слоя диалогового окна */
height:400px; /* высота слоя диалогового окна */
background-color: #FFFFCC; /* цвет слоя диалогового окна */
border: 1px dotted gray; /* рамка слоя диалогового окна*/
/* Позиционируем слой по центру */
position: absolute; /* устанавливаем абсолютное позиционирование */
left: 30%; /* устанавливаем верхний левый угол слоя по горизонтали по центру страницы */
top: 42%; /* устанавливаем верхний левый угол слоя по вертикали по центру страницы */
margin-top: -150px; /* сдвигаем слой вверх на половину высоты слоя */
margin-left: -100px; /* сдвигаем слой влево на половину ширины слоя */
/* делаем слой невидимым */
clip: rect(200px 300px 200px 300px); /* свойство clip подробно рассмотрим ниже (оно ключевое) */
}
/* заголовок диалогового окна */
.dTitle {
font-weight: bold;
margin: 0;
padding: 5px;
background-color: #CCFFFF;
}
/* текст диалогового окна */
.dBody {
text-align: center;
margin: 0;
padding: 10px 5px;
}
</style>
Скрипт:
var curtainStep = 10;
var curtainTimeout = 15;
var curtainLeft = 300;
var curtainTop=200; //Добавил top
var curtainRight = 300;
var curtainWidth = 600;
var curtainBottom=200;//Добавил bottom
function curtainOpen()
{
if (curtainLeft>0)
{
curtainTop -= curtainStep; // усечение top
curtainRight += curtainStep;
curtainLeft -= curtainStep;
curtainBottom += curtainStep; // усечение bottom
//Добавил их в rect-->
var rect = 'rect('+curtainTop +'px, '+ curtainRight +'px, '+ curtainBottom +'px, '+ curtainLeft +'px)';
document.getElementById("dialogWindow").style.clip = rect;
setTimeout(curtainOpen,curtainTimeout); //вызываем эту же функцию повторно через curtainTimeout миллисекунд
}
}
function curtainClose()
{
if (curtainLeft<curtainRight)
{
curtainTop += curtainStep; // сужение top
curtainRight -= curtainStep;
curtainLeft += curtainStep;
curtainBottom -= curtainStep; // сужение bottom
//Добавил их в rect-->
var rect = 'rect('+curtainTop +'px, '+ curtainRight +'px, '+ curtainBottom +'px, '+ curtainLeft +'px)';
document.getElementById("dialogWindow").style.clip = rect;
setTimeout(curtainClose,curtainTimeout);
}
}
function clipImg(on)
{
document.getElementById("clipEx1").style.clip=on?'rect(78px 146px 183px 84px)':'rect(auto,auto,auto,auto)';
}
|
Спасибо! :)
|
Можете подсказать что нужно добавлять чтобы в каждом окне открывался свой текст
пробовал:
<div id="dialogWindow">
<div class="dTitle">Диалоговое окно2</div>
<p class="dBody">текст 2 .<br>
<button style="clear:both; margin-top:30px;" type="button" onClick="curtainClose()">Закрыть</button></p>
</div>
</head>
<a href="javascript:curtainOpen()" class="strong">раскрывающееся окно2</a>
Почемуто открывает один и тотже текст:-E |
| Часовой пояс GMT +3, время: 13:14. |