Light Box

Developer
Gigaleet
Size
2,387 Kb
Views
14,168
  1. Light Box Previews
  2. Light Box HTML Codes
  3. Light Box CSS Codes
  4. Light Box JS Codes

How do I make an light box?

What is a light box? How do you make a light box? This script and codes were developed by Gigaleet on 08 January 2023, Sunday.

Light Box Previews
IQ Test

Light Box - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Light Box</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a class="lightbox_form" href="JavaScript:;">Learn More</a>
<!-- LightBox 1 Link -->
<a class="lightbox_comment" href="JavaScript:;">Comments</a>
<!-- LightBox 2 Link -->
<div class="lightbox_wrapper" style="display:none;"> <!-- LightBox Wrapper --> <div id="lightbox_form" class="lightbox" style="display:none;"> <!-- LightBox 1 Window --><a class="close_lightbox">X</a> <!-- LightBox Close Link --> <p>Some Content</p> </div> <!-- /END LightBox 1 Window --> <div id="lightbox_comment" class="lightbox" style="display:none;"> <!-- LightBox 2 Window --><a class="close_lightbox">X</a> <!-- LightBox Close Link --> <p>Some Different Content</p> </div> <!-- /END LightBox 2 Window -->
</div>
<!-- /END LightBox Wrapper --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Light Box - Script Codes CSS Codes

.noscroll { overflow: hidden;
}
.lightbox_wrapper { z-index: 1010 !important; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); cursor: pointer;
}
.lightbox_wrapper > .lightbox { border-radius: 2px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6); background: #fff; z-index: 1020 !important; position: relative; max-width: 800px; margin: 100px auto 50px auto; padding: 25px 25px 40px 25px; cursor: default; max-height: 530px; overflow: auto;
}
.lightbox_wrapper > .lightbox > a.close_lightbox { position: absolute; top: 10px; right: 12px; font-family: sans-serif; font-size: 1.1em; line-height: 1.1em; color: #000000; text-decoration: none; transition: all .2s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}
.lightbox_wrapper > .lightbox > a.close_lightbox:hover { font-size: 1em; text-decoration: none; top: 12px; right: 14px;
}

Light Box - Script Codes JS Codes

 //Open Light box $(document).on('click', 'a[class^=lightbox]', function() { var lbclass = $(this).attr("class"); $('#' + lbclass).parent('.lightbox_wrapper').show(); $('#' + lbclass).show(); $('body').addClass('noscroll'); }); //Close light box //On wrapper click $('.lightbox_wrapper').click(function() { $('.lightbox_wrapper').hide(); $('.lightbox').hide(); $('body').removeClass('noscroll'); }); //On close link click $('.close_lightbox').click(function() { $('.lightbox_wrapper').hide(); $('.lightbox').hide(); $('body').removeClass('noscroll'); }); //Prevent lightbox from closing when elements inside the lightbox are clicked. $('.lightbox').click(function(event) { event.stopPropagation(); });
Light Box - Script Codes
Light Box - Script Codes
Home Page Home
Developer Gigaleet
Username Gigaleet
Uploaded January 08, 2023
Rating 3
Size 2,387 Kb
Views 14,168
Do you need developer help for Light Box?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Gigaleet (Gigaleet) Script Codes
Name
Status Loader
Modern Login Box
CSS placeholder labels
Modal Dialog
Pure CSS Hamburger Button
A Pen by Gigaleet
FlexBox Fixed Left Side Bar and Header Layout
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!