Here i developed simple lightweight qbox, They help you when we required instantly loaded and easy to customization same as fancybox, lightbox plugin. Now i say you to how to build custom lightbox and easy to use just need simple jQuery and css knowledge.
Live Demo
DownloadFollowing step to you use and how to build custom qbox/lightbox
Now you need to create a one CSS file.
body,html{
padding: 0px; margin: 0px;
}
.overlay#qbox
{
top:0px;
left: 0px;
width: 100%;
height: 100%;
position: fixed;
z-index: 99999;
overflow: hidden;
background-color: rgba(0,0,0,0.4);
display: none;
}
#qbox .wrapper{
position: absolute;
width: 100%;
height: 100%;
display: table;
}
#qbox .inner{
display: table-cell;
text-align: center;
vertical-align: middle;
#top:45%;
}
#qbox .close{position: absolute;float: right; right: -10px;
top: -10px;
width: 30px;
height: 30px;
background:transparent url("close.PNG") no-repeat center center;
background-size: 100% 100%;
cursor: pointer;
}
#qbox .content{
width: 100%;
max-width: 500px;
height: auto;
position: relative;
width: 100%;
margin: auto;
background-color: #fff;
box-shadow: 0px 0px 25px -13px;
padding: 15px;
}
#qbox .content iframe{width: 100%;min-height: 400px;
height: 100%;border: 0px;}
#qbox .content img{width: 100%; max-width: 700px;}
.fancy-content{display: none;}
@media screen and (max-width:550px){
#qbox .content{
margin: 2%;
padding: 2%;
width: 92%;
}
}
Above css are required to format layout of qbox
Now you create one script file that’s important to handle events,
$(document).ready(function(){
var _bx=".overlay#qbox";
//click on .opnqbox class to display qbox
$(document).on("click",".opnqbox",function(e){
// wire-frame of qbox to displat middle center on screen
var qbox=$("<div class='overlay qbox' id='qbox'><div class='wrapper' ><div class='inner' id='boxwcloser'><div class='content'><div class='close' id='boxwcloserbtn'></div><div class='data'>rr</div></div></div></div></div>");
// Check qbox is loaded or not
if(!$(this).hasClass("qbox-opend"))
{
var d = new Date();
var uniqueId=d.getTime();
// Each qbox unique identify uisng current time
qbox.attr("box-id",uniqueId);
$(this).attr("box-id",uniqueId).addClass("qbox-opend");
// Check witch type of qbox required like iframe, image or static content
if($(this).attr("href")!=undefined)
{
// Check is image box
if($(this).data("type")=="img")
qbox.find(".data").html("<img src='"+$(this).attr("href")+"' class='qbox-img'>"); //set image for qbox
else
qbox.find(".data").html("<iframe src='"+$(this).attr("href")+"'></iframe>");//Set iframe url when init
}
else
qbox.find(".data").html($("*[data-box='qfancy']").html());//Set static content on qbox when first time init.
$("body").append(qbox);
$(_bx+"[box-id='"+$(this).attr("box-id")+"']").fadeIn(200);//load or show qbox
}
else
$(_bx+"[box-id='"+$(this).attr("box-id")+"']").fadeIn(200);//re-load or show qbox
e.preventDefault();
});
//Close when click on overlay or close button
$(document).on("click","#qbox .wrapper",function(e){
//Hide if mached target id
if(e.target.id=="boxwcloser"|| e.target.id=="boxwcloserbtn")
$(_bx).fadeOut(100);
});
});Above script are handle event to show and unique identify your contents
Now using below steps display/set how to open and configure on custom html
<html>
<head>
<title>9code.info | Simple custom middle-center html block</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!--qbox style -->
<link rel="stylesheet" type="text/css" href="style.css">
<!--qbox script -->
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<style type="text/css">
/*Current page style*/
body{
text-align: center;
}
.box{
width: 100%;
max-width: 200px;
height: 50px;
border: 1px solid #dedede;
border-radius: 3px;
background: #efefef;
display: inline-block;
margin: auto;
cursor: pointer;
padding: 10px;
text-decoration: none;
color: #444;
font-weight: bold;
font-family: sans-serif;
padding-top: 35px;
margin: 10px;
}
.box:hover{
border: 1px solid #bbb;
background: #ddd;
color: #000;
}
</style>
/* You need current page text display on qbox then following line set same class */
<a class="opnqbox box" >Open Static text qbox</a>
<!--static qbox contents-->
<div class="fancy-content" data-box="qfancy">
<h1>Your static title</h1>
<hr/>
<p>Here write whatever your html descriptions and text.</p>
</div>
/* You need to display iframe then write below formate class and href */
<!--qbox display iframe-->
<a href="https://9code.info" class="opnqbox box" >Open Iframe qbox </a>
<!--qbox display image you need to add on data attribute data-type='img' -->
<a href="http://img0.mxstatic.com/wallpapers/0da7beae7b4298a4dccf3bdfc489e554_large.png" class="opnqbox box" data-type="img" >Open Image qbox</a>
</body>
</html>All are done, I how now you aware about how to create and set light weight custom box on our website, If you not understand or some my mistakes then please write down below comment to make batter for you and other web users/developers .
Leave a Reply