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