Last updated on March 7th, 2022 at 05:19 pm
Create a draggable div popup box using Javascript. Add some CSS to make it look better. No complex code required. It also has a window close option. Basically a div overlay that appears on top of a webpage (Lightbox)
It is very simple and just follow the below steps.
First step is to create the CSS part, The lighbox type design
.grey_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: grey;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=60);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 22px solid #09C;
background-color: white;
z-index:1002;
overflow: auto;
}
The above CSS code has 2 class names loaded. One is grey_overlay which will be the background color and the other is the white_content which is the div that is shown as the popup.
The second step in writing the code is to create simple basic hyperlink tags along with some CSS tricks using onclick()
This is the main webpage. To display a lightbox <a href = "javascript:void(0)" onclick = "document.getElementById('popupdiv').style.display='block';document.getElementById('fade').style.display='block'"> Click Here</a></p>
<div id="popupdiv" class="white_content">This is the lightbox content. <a href = "javascript:void(0)" onclick = "document.getElementById('popupdiv').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
The above set of code together will help you create a basic div popup with lightbox effect when you click the hyperlink. How to make the div popup draggable?
For that you need to get some help from javascript. Make sure that you copy the below javascript code along with the div tag to load the grey_overlay and paste it at the end of your webpage otherwise it will not load and will throw error as the div innerhtml for id ‘popupdiv’ will be null.
<script>
window.onload = addListeners();
function addListeners(){
var _mydiv = document.getElementById('popupdiv')
_mydiv.addEventListener('mousedown', mouseDown, false);
window.addEventListener('mouseup', mouseUp, false);
}
function mouseUp()
{
window.removeEventListener('mousemove', divMove, true);
}
function mouseDown(e){
window.addEventListener('mousemove', divMove, true);
}
function divMove(e){
var div = document.getElementById('popupdiv');
div.style.position = 'absolute';
div.style.top = e.clientY + 'px';
div.style.left = e.clientX + 'px';
}
</script>
<div id="fade" class="grey_overlay"></div>
That is all you have to do. Now lets combine together all the code and make it as a single webpage.
Here is how the entire code looks like
<style>
.grey_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: grey;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=60);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 22px solid #09C;
background-color: white;
z-index:1002;
overflow: auto;
}
</style><p>
This is the main webpage. To display a lightbox click <a href = "javascript:void(0)" onclick = "document.getElementById('popupdiv').style.display='block';document.getElementById('fade').style.display='block'">here</a></p>
<div id="popupdiv" class="white_content">This is the lightbox content. <a href = "javascript:void(0)" onclick = "document.getElementById('popupdiv').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
<script>
window.onload = addListeners();
function addListeners(){
var _mydiv = document.getElementById('popupdiv')
_mydiv.addEventListener('mousedown', mouseDown, false);
window.addEventListener('mouseup', mouseUp, false);
}
function mouseUp()
{
window.removeEventListener('mousemove', divMove, true);
}
function mouseDown(e){
window.addEventListener('mousemove', divMove, true);
}
function divMove(e){
var div = document.getElementById('popupdiv');
div.style.position = 'absolute';
div.style.top = e.clientY + 'px';
div.style.left = e.clientX + 'px';
}
</script>
<div id="fade" class="grey_overlay"></div>
Please note that this code may not be compatible with Internet Explorer 8, you may need to modify the JavaScript part and use the attachEvent property as the addEventListener() is not supported in IE8.
admin