I am creating a site that needs a popup with links on it. Oh and it needs to be transparent (translucent). What I have done was drop a Text/HTML module in the pane and added a table with clickable buttons to give it a side menu look. When a user clicks on a menu item, a translucent page with clickable links will popup. Once the user selects a link, they will be redirected to that page. How do I do this last part? I have listed my original html from the Text/HTML, the CSS needed for the js, the js, and the HTML for the js.
Here is my 'side menu':
|
|
|
|
|
|
I found this code on the web and it does exactly what I want, but I can't get it to wotk with the buttons (http://www.pat-burt.com/web-development/how-to-do-a-css-popup-without-opening-a-new-window/).
The CSS
#blanket {
background-color:#111;
opacity: 0.65;
filter:alpha(opacity=65);
position:absolute;
z-index: 9001;
top:0px;
left:0px;
width:100%;
}
#popUpDiv {
position:absolute;
background-color:#eeeeee;
width:300px;
height:300px;
z-index: 9002;
The JS
function
}
toggle(div_id) {var el = document.getElementById(div_id);if ( el.style.display == 'none' ) { el.style.display = 'block';}else {el.style.display = 'none';}
function
viewportheight = window.innerHeight;
}
viewportheight = document.documentElement.clientHeight;
}
blanket_height = viewportheight;
}
blanket_height = document.body.parentNode.clientHeight;
}
blanket_height = document.body.parentNode.scrollHeight;
}
}
blanket.style.height = blanket_height +
popUpDiv_height=blanket_height/2-150;
blanket_size(popUpDivVar) {if (typeof window.innerWidth != 'undefined') {else {if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {else {if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {else {var blanket = document.getElementById('blanket');'px';var popUpDiv = document.getElementById(popUpDivVar);//150 is half popup's height
popUpDiv.style.top = popUpDiv_height +
}
'px';
function
viewportwidth = window.innerHeight;
}
viewportwidth = document.documentElement.clientHeight;
}
window_width = viewportwidth;
}
window_width = document.body.parentNode.clientWidth;
}
window_width = document.body.parentNode.scrollWidth;
}
}
window_width=window_width/2-150;
window_pos(popUpDivVar) {if (typeof window.innerWidth != 'undefined') {else {if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {else {if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {else {var popUpDiv = document.getElementById(popUpDivVar);//150 is half popup's width
popUpDiv.style.left = window_width +
}
'px';
function
blanket_size(windowname);
window_pos(windowname);
toggle(
toggble(windowname);
}
popup(windowname) {'blanket');
The HTML
<div id=”blanket” style=”display:none;”>
Click Here To Open The Pop Up