How to Create Normal Lightbox by using CSS & Javascript

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

Color Black White Gold Rose Gold

Capacity 16GB 32GB 64GB 128GB

QTY 1 2 3

Include JQuery Library

Custom Lightbox by using CSS and Javascript

/* Attach the Table CSS and Javascript */
<link rel="stylesheet" href="https://code.jquery.com/jquery-1.10.2.js">

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

Click here to Download Code Download