Добрый день! Помогите, пожалуйста, доработать скрипт модального окна. Нужно сделать так, чтобы по умолчанию, т.е. при открытии страницы модальное окно уже было открытым, и при этом кнопка открытия окна была недоступна. Окно закрываем, кнопка открытия появляется. Нажимаем на кнопку, окно открывается, а кнопка становится недоступна. Нужна такая логика. Спасибо большой за помощь!
(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);
.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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click">Открыть</button>
<div class="message">Сообщение
<button class="okay">Закрыть</button>
</div>