How to make a lightbox in a very simple way
First I am telling you what is the main logic behind the lighbox. It is very simple & you can easily do it if you have a little knowledge of css & html.
1. In a lightbox you can see a black box appers & it covers the whole browser – it is nothing but a div (over-wrap in my case ) with 100% width & having a fixed position & a black background [Follow the .over-wrap css in the css section]
2. With in that over-wrap div you have to place your own content or image or whatever you want. (In my case I just print hello , you can follow the lightbox-content div content in the html portion.)
This is the html portion:
<div id=”outer”>
<div>
<div>X close</div>
<div>
HelloHelloHelloHelloHelloHelloHelloHelloHelloHello<br />
HelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHello<br />
HelloHelloHelloHelloHelloHelloHelloHelloHelloHello<br />
HelloHelloHelloHelloHelloHello
</div>
</div>
</div>
This is the css portion:
.over-wrap { background-color: #000000; height: 100%; left: 0; position: fixed; top: 0;
width: 100%; z-index: 1000;}
#inner{ width:100%; display:none;}
#close{ color:#FF0000;}
#content { width:90%; margin:0 auto; height:95%; border:1px solid #00ff00; color:#FFFFFF;}
</style>
And finally the Jquery scripts:
$(‘#test’).click(function(){
$(‘#inner’).addClass(‘over-wrap’).show(’slow’);
});
$(‘#close’).click(function(){
$(‘#inner’).hide(’slow’);
});
});
Latest posts by Sandipan Bhattacharjee
- Dynamically Styling Modules and Blocks in Drupal 6 - September 22nd, 2011
- How to Create Drupal Sub-themes from scratch - July 12th, 2011
- Zend framework step by step tutorial (Folder structure) - March 21st, 2011
- Zend Framework variables - March 21st, 2011
- Zend Framework Database Query - March 21st, 2011
