Я всех приветствую! Помогите, пожалуйста, доработать скрипт модального окна. Это окно является справкой для пользователя. Мне нужно, чтобы по умолчанию окно было уже в открытом состоянии, а кнопка открытия была недоступна. При закрытии окна нужен один из двух эффектов (какой возможно сделать): 1) окно закрывается, после чего сразу в этом же месте появляется кнопка открытия, и тут же она перемещается видимым образом в правый верхний угол экрана. 2) окно закрывается, после чего появляется кнопка открытия уже сразу в правом верхнем углу экрана, с анимацией (анимация в виде колокольчика что ли, для привлечения внимания пользователя.) Очень прошу помощи! Благодарю!
html:
<button class="click">Открыть</button>
<div class="message">Сообщение
<button class="okay">Закрыть</button>
</div>
css:
.click {
display: block;
height: 80px;
width: 300px;
position: absolute;
background: #260016;
}
.message {
position: absolute;
top: calc(50% - 140px);
left: calc(50% - 300px);
width: 600px;
height: 280px;
z-index: 1000;
background: #fff;
color: button;
padding: 60px;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-radius: 6px;
-webkit-transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
opacity: 0;
}
.message.active {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.okay {
display: block;
height: 80px;
width: 300px;
background: #e68a6c;
}
js:
(function() {
$(function() {
// открываем окно
$('button').click(function(evt){
evt.stopPropagation();
$('.message').addClass('active');
});
// закрываем окно
$('.message').click(function(evt){
evt.stopPropagation();
});
$(document).add('.okay').click(function() {
$('.message').removeClass('active');
});
});
}).call(this);