How do I get my content behind my popup?

Asked

Viewed 41 times

1

Every time I click on my popup button, my content "goes down". How do I get the popup above the content?

body{
	padding:0;
	margin:0;
}

.container2{
		position:relative;
		margin:0 auto;
		text-align:center;
		margin-top: 100px;
}

.btn2{
		padding: 20px 15px;
		background-color: #e91e63;
		border-radius: 4px;
		color: #fff;
		border:none;
		font-weight:bold;
		text-transform:uppercase;
}
.cover2{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	display:none;
	background-color:rgba(0,0,0,0.5);
	z-index:999;	
}	
.popup2{
		width:400px;
		height:180px;
		background-color: #fff;
		border-radius: 4px;
		margin: 0 auto;
		position:relative;
		display:none;
		z-index:1000;
}	

p{
		font-size:20px;
		line-height: 100px;
		
}

.options2{
	position:absolute;
	width:100%;
	bottom:0;
	left:0;
	
}

#close2{
	width:25px;
	height:25px;
	line-height:25px;
	font-size:25px;
	border-radius:50%;
	border:2px solid;
	color: #ef2350;
	float:right;
	cursor:pointer;
}	

a{
		text-transform:uppercase;
		text-decoration:none;
		color:#fff;
		text-align:center;
		padding:15px 0px;
}		

#c a:first-child{
		float:left;
		width:50%;
		background-color:#2ecc71;
}	

#d a:last-child{
		float:left;
		width:50%;
		background-color:#f44336;
}	
		
<html>
<head>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="container2">
		<button class="btn2">alert message</button>
		<div class="popup2">
		<span id="close2">&times;</span>
			<p>Do You want to Delete??</p>
			<div class="options2">
				<div id="c"><a href="" id="cancela">cancel</a></div>
				<div id="d"><a href="" id="deleta">delete</a></div>
			</div>
		</div>
	</div>	
	<div class="cover2">
		
	</div>
	<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
		<script>
		$(document).ready(function(){
			$('.btn2').on('click',function(){
				$('.cover2').fadeIn('slow');
				$('.popup2').fadeIn('slow');
			});
			$('.popup2').on('click',function(){
				if($(event.target).is('#close2')){
					$('.cover2').fadeOut('slow');
					$('.popup2').fadeOut('slow');	
				}	
			});
			$('.cover2').on('click',function(){
				$('.cover2').fadeOut('slow');
				$('.popup2').fadeOut('slow');
			});
			$('#cancela').on('click',function(){
				alert('Cancelado !');
			});
			$('#deleta').on('click',function(){
				alert('Deletado !');
			});
		});
	</script>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
	sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
	Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
	Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</body>
</html>

javascript jquery html css popup

1 answer

0

Just change the position:absolute; for position:fixed;, so the class .cover2 which is your modal will occupy the whole screen

Follow the modified code

body{
	padding:0;
	margin:0;
}

.container2{
		position:relative;
		margin:0 auto;
		text-align:center;
		margin-top: 100px;
}

.btn2{
		padding: 20px 15px;
		background-color: #e91e63;
		border-radius: 4px;
		color: #fff;
		border:none;
		font-weight:bold;
		text-transform:uppercase;
}
.cover2{
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	display:none;
	background-color:rgba(0,0,0,0.5);
	z-index:999;	
}	
.popup2{
		width:400px;
		height:180px;
		background-color: #fff;
		border-radius: 4px;
		margin: 0 auto;
		position:relative;
		display:none;
		z-index:1000;
}	

p{
		font-size:20px;
		line-height: 100px;
		
}

.options2{
	position:absolute;
	width:100%;
	bottom:0;
	left:0;
	
}

#close2{
	width:25px;
	height:25px;
	line-height:25px;
	font-size:25px;
	border-radius:50%;
	border:2px solid;
	color: #ef2350;
	float:right;
	cursor:pointer;
}	

a{
		text-transform:uppercase;
		text-decoration:none;
		color:#fff;
		text-align:center;
		padding:15px 0px;
}		

#c a:first-child{
		float:left;
		width:50%;
		background-color:#2ecc71;
}	

#d a:last-child{
		float:left;
		width:50%;
		background-color:#f44336;
}	
		
<html>
<head>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="container2">
		<button class="btn2">alert message</button>
		<div class="popup2">
		<span id="close2">&times;</span>
			<p>Do You want to Delete??</p>
			<div class="options2">
				<div id="c"><a href="" id="cancela">cancel</a></div>
				<div id="d"><a href="" id="deleta">delete</a></div>
			</div>
		</div>
	</div>	
	<div class="cover2">
		
	</div>
	<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
		<script>
		$(document).ready(function(){
			$('.btn2').on('click',function(){
				$('.cover2').fadeIn('slow');
				$('.popup2').fadeIn('slow');
			});
			$('.popup2').on('click',function(){
				if($(event.target).is('#close2')){
					$('.cover2').fadeOut('slow');
					$('.popup2').fadeOut('slow');	
				}	
			});
			$('.cover2').on('click',function(){
				$('.cover2').fadeOut('slow');
				$('.popup2').fadeOut('slow');
			});
			$('#cancela').on('click',function(){
				alert('Cancelado !');
			});
			$('#deleta').on('click',function(){
				alert('Deletado !');
			});
		});
	</script>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
	sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
	Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
	Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</body>
</html>

Browser other questions tagged javascript jquery html css popup

You are not signed in. Login or sign up in order to post.