JQuery Custom light Box

Posted By : Rohit Goyal | 31-Dec-2016

jQuery Custom Light Box


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

 

About Author

Author Image
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.

Request for Proposal

Name is required

Comment is required

Sending message..