modal-pop-up-using-js
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>popUp Pop-up</title>
	<style>
		.popUpContainer {
			background-color: #000;
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0px;
			left: 0px;
			background-color: rgba(0,0,0,0.4);
			display:none;
		}

		.popUp{
			border:5px solid #000;
			background-color: #fff;
			border-radius: 10px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.popUpHeader,.popUpBody,.popUpFooter{
			padding: 20px;
		}

		.popUpHeader,.popUpBody{
			border-bottom: 1px solid #000;
		}

		.popUpFooter {
    		text-align: right;
		}

		.closepopUp{
			padding:5px 10px;
		}
		
	</style>
</head>
<body>
<h1>popUp Pop-up using JS</h1>

<button id="openpopUp">Open popUp</button>
<div class="popUpContainer">
	<div class="popUp">
	<div class="popUpHeader">popUp Header</div>
	<div class="popUpBody">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod laborum obcaecati atque odio cupiditate consequatur tenetur suscipit nostrum voluptatum. Eum, recusandae est? Eveniet quasi cum omnis vel placeat, cupiditate adipisci.</div>
	<div class="popUpFooter">
		<button class="closepopUp">Close</button>
	</div>
	</div>
</div>

<script>
	let open = document.querySelector('#openpopUp');
	let popUpC = document.querySelector('.popUpContainer');
	let popUpClose = document.querySelector('.closepopUp');
	let dBlock = `display:block;`
	let dNone = `display:none;`
	open.addEventListener('click', ()=>{
		popUpC.style = dBlock;
	})
	popUpClose.addEventListener('click', ()=>{
		popUpC.style = dNone;
	})
</script>
</body>
</html>
popUp Pop-up
Result:

popUp Pop-up using JS

Write a comment