I will tell you how to do it
Add in your
CSS stylesheet these codes (you can customize the box and the layer style)
- Code:
#layer {
background: black;
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 1000;
opacity: 0.1;
}
#layer {
background: black;
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 1000;
opacity: 0.1;
}
#box {
width: 500px;
height: 250px;
position: fixed;
z-index: 2000;
padding: 5px;
left: 33%;
top: 30%;
border-radius: 4px;
background: white;
}
Now, create a new
javascript code in your forum, and add this code (in all pages if you want it in all the pages, in topics or wherever you want)
- Code:
$(function() {
$('body').after('<div id="layer" class="hide" onclick="$(\'.hide\').toggle(\'fast\');"></div><div id="box" class="hide">CONTENT OF THE BOX HERE</div>');
});
let me know