The easiest way is to have a superimposed div with a a high z-index, with transparent background acting as an overlay. You could then have another div which is centered above the overlay(with higher z-index) and containing the list markup

CSS

#shim {
opacity: .75;
filter: alpha(opacity=75);
-ms-filter: "alpha(opacity=75)";
-khtml-opacity: .75;
-moz-opacity: .75;
background: #B8B8B8;
position: absolute;
left: 0px;
top: 0px;
height: 100%;
width: 100%;
z-index:990
}

#msgbx {
position: absolute;
left: 50%;
top: 50%;
height: 150px;
width: 350px;
margin-top: -75px;
margin-left: -175px;
background: #fff;
border: 1px solid #ccc;
box-shadow: 3px 3px 7px #777;
-webkit-box-shadow: 3px 3px 7px #777;
-moz-border-radius: 22px;
-webkit-border-radius: 22px;
z-index:999
}

HTML

<div id="shim"></div>
<div id="msgbx">inject list markup here</div>

To show popup

document.getElementById('shim').style.display=document.getElementById('msgbx').style.display ="block";

To Hide

document.getElementById('shim').style.display=document.getElementById('msgbx').style.display ="none";