Страницы

Поиск по вопросам

пятница, 12 июля 2019 г.

JavaScript анимация на всплывающее окно

Здравствуйте, не подскажите как сделать анимацию постепенное появление при нажатии на кнопку всплывающего окна и кнопку закрытия на 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);



Ответ

function modal(e) { let modal = document.createElement("div"), block = e.cloneNode(true); Object.assign(modal.style, { position: "fixed", left: "0px", top: "0px", width: "100%", height: "100%", backgroundColor: "rgba(0,0,0,.5)" }); Object.assign(block.style, { display: "initial", opacity: 0, position: "absolute", left: "50%", top: "50%", transform: "translate(-50%, calc(-50% + 100px))", transition: ".6s opacity, .6s transform" }); modal.appendChild(block); document.body.appendChild(modal); setTimeout(()=>Object.assign(block.style, { opacity: 1, transform: "translate(-50%,-50%)" }),15); modal.addEventListener("click", e => e.target === modal ? document.body.removeChild(modal) : ""); } showModal.addEventListener("click", ()=>modal(modalBlock));


Комментариев нет:

Отправить комментарий