0%

Hey! Do you have any query related to front end?

Sign in Sign up

Simple overlay popup with css3 and jqueryBack

CSS3:

.button {
	padding: 10px 20px;
	color: #fff;
	background: #b35713;
	border-radius: 5px;
	position: absolute;
}
.popup {
	position: absolute;
	z-index: 10;
	width: 100%;
	max-width: 35%;
	border: solid 10px #fff;
	
	visibility: hidden;
	opacity: 0;	
	transform: scale(.3, .3);
	transition: all cubic-bezier(0, .28, 0, 1.6) .6s;
}
.popup img {
	width: 100%;
	height: auto;
	display: block;
}
.close {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	padding: 10px;
	background: #000;
	color: #fff;
	font-size: 20px;
	line-height: 20px;
	text-align: center;
	display: block;
	position: absolute;
	right: -25px;
	top: -25px;
	cursor: pointer
}
.overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.5);
	top: 0;
	left: 0;
	z-index: 9;
	
	visibility: hidden;
	opacity: 0;
	transition: all ease-out .3s;
}
.active {
	visibility: visible;
	opacity: 1;
}
.popup.active {
	transform: scale(1, 1)
}

Little jquery:

$('.button').click(function(){
	$('.popup, .overlay').addClass('active');	
});
		
$('.close').click(function(){
	$('.popup, .overlay').removeClass('active');	
});

Just add and remove class from popup and overlay class, rest leave for css3 to work upon.

How to comment:

  • Create an account in discuss by clicking on login next to arrow.
  • Create password for discuss and varify your email id, through your mail.
  • Refresh page and comment.

You might also like

  • Removing file extension

    Remove file extension via .htaccess

    • 1
    • 0
    • 1
    • facebook icon
    • twitter icon
    • google plus
  • Javascript drag and drop

    Very light script for dag and drop

    • 333
    • 5
    • 333
    • facebook icon
    • twitter icon
    • google plus
  • Bubbler popup

    This bubbler effect is created by CSS3 transform

    • 332
    • 11
    • 332
    • facebook icon
    • twitter icon
    • google plus

Latest quries posted

gopa kumarabout 3 years ago

amit singhabout 3 years ago

rahmat aliabout 3 years ago

mandavi tiwariabout 3 years ago

rahul sharmaabout 3 years ago

Ask question
Latest video
Learn Angular
Profile pic
Guest Back
Username
Password