Friends you often use a plugin for inserting light box in your page. But Can You imagine making a light box is so simple. Light box has a fixed properties.by using that you can add light box in just few minutes into your page.
Generally we need a background on which our div or content will display. This is often named as backdrop and the div will display on background is named as model.
Just put this simple code in your HTML page and CSS. You Can Create a light box in just few minutes.So here is the code:-
Html:-
<div class="backdrop"></div>
<div class="model"></div>
Css:-
.backdrop{
background:rgba(0,0,0,0.5);
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:998;
}
.mymodel{
Background:#fff;
Position:fixed;
Top:100%;
Left:35%;
Width:200px;
Height:200px;
z-index:999;
}
J-query:-
.click(function(){
$('.backdro').show(200);
$('.model').show(200);
}
$('.backdrop').click(function(){
$('.model').hide(200);
$(this).hide(200);
}
That's it
If you have any query please contact on mt skype Id :- rohit.oodles
More From Oodles
Ready to innovate? Let's get in touch
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Rohit Goyal
Rohit is an experienced Frontend Developer, having good experience in HTML5, CSS3, Bootstrap, Jquery, AngularJS, Angular4/5, Restful API Integration, ES6 . His hobbies are playing cards and cricket.