HTML5 is a markup language

Product Id: 51526

(10 reviews)

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.Lorem Ipsum is simply dummy text of the printing and typesetting industry.

75.00 60.00

How to Create Normal Lightbox by using Css & Javascript

Custom Lightbox by using CSS and Javascript

Demo

Click on any button you will find popup according to your selected button

CSS Code

				
				.popUp_container{ z-index:999;   display:block !important; position:fixed; background:rgba(0,0,0,0.6);top:0; left:0; width:100%; height:100%;}
				.pop_up{transition: all 0.3s ease-in-out 0s;  border-radius:05px; position:relative; background:#fff;padding:20px; width:50%; margin:0 auto; top:15%;}
				.close {background: url("closed-arrow.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);    cursor: pointer;    font: 14px arial;    height: 28px;     position: absolute;    right: -1%;    top: -2%;  width: 28px;}
				.popUp_container_hid {display:none;  }

Javascript Code

				
				 $(".lightbox").click(function(){
					$(".popUp_container_hid").addClass("popUp_container");
				  });
				  
				   $(".close").click(function(){
					$(".popUp_container_hid").removeClass("popUp_container");
				  });
				});

Custom Lightbox for Danger button by using CSS and Javascript

Danger Demo Button

CSS Code

				
				.popUp_container{ z-index:999;   display:block !important; position:fixed; background:rgba(0,0,0,0.6);top:0; left:0; width:100%; height:100%;}
				.pop_up{transition: all 0.3s ease-in-out 0s;  border-radius:05px; position:relative; background:#fff;padding:20px; width:50%; margin:0 auto; top:15%;}
				.close {background: url("closed-arrow.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);    cursor: pointer;    font: 14px arial;    height: 28px;     position: absolute;    right: -1%;    top: -2%;  width: 28px;}
				.popUp_container_hid {display:none;  }
				.border-danger { border-top:5px solid red; }

Javascript Code

				
				 $(".lightbox").click(function(){
					 $(".btn-danger").click(function(){
						$('.pop_up').addClass('border-danger');
					});
					
					 $(".close").click(function(){
						$('.pop_up').removeClass('border-danger');
					  });
					
				});