Здравствуйте, не подскажите как сделать анимацию постепенное появление при нажатии на кнопку всплывающего окна и кнопку закрытия на id=exit
в самом окне.
function showModalWin() {
var darkLayer = document.createElement('div'); // слой затемнения
darkLayer.id = 'shadow'; // id чтобы подхватить стиль
document.body.appendChild(darkLayer); // включаем затемнение
var modalWin = document.getElementById('popupWin'); // находим наше "окно"
modalWin.style.display = 'block'; // "включаем" его
darkLayer.onclick = function() { // при клике на слой затемнения все исчезнет
darkLayer.parentNode.removeChild(darkLayer); // удаляем затемнение
modalWin.style.display = 'none'; // делаем окно невидимым
return false;
};
}
showModal.addEventListener("click", showModalWin);
<div style="text-align: center; display: none" id="popupWin" class="modalwin">
<h2>Какая-то форма</h2>
<form>
<input value="text">
<input type="button" value="OK">
</form>
<hr>
<a id="exit" href="#">Выход</a>
</div>
<button id="showModal">Показать окно</button>