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

354

21 января 2018, 05:56

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

Answer 1

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));

<div id="modalBlock" style="display: none; box-shadow: 0px 0px 50px 10px white; padding: 20px; background-color: white;"> 
	<h2>Modal</h2> 
	<p>Modal random text and more random text</p> 
</div> 
 
<button id="showModal">Show modal</button>