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':

 

   
       
           
       
       
           
       
       
           
       
       
           
       
       
           
       
       
           
       
   

B.V.I.

St. Thomas

St. John

St. Croix

Puerto Rico

Miami

 

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;”>