JSFiddle - React, Tailwind, and code Playground

HTML

<!--http://jsfiddle.net/SpYk3/V3Ehx/-->

<a id='clickShow' class='a'>Click here</a>
 
<div id="popupContact" class='divpopup'>
        <a id="popupContactClose">x</a>
        <h1>Option Image</h1>
        <br>
            <table class='tblpopup' style='border-collapse: collapse;'>
                <tr id="trradio">
                                    </tr>
            </table>
    </div>
    <div id="backgroundPopup"></div>

CSS

a:not(#popupContactClose) {
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    -moz-box-shadow: inset .1em .1em .1em #00a, inset -.1em -.1em 1em #00a;
    -webkit-box-shadow: inset .1em .1em .1em #00a, inset -.1em -.1em 1em #00a;
    background-color: #ffa;
    border: 3px groove #0f0;
    border-radius: 1em;
    box-shadow: inset .1em .1em .1em #00a, inset -.1em -.1em 1em #00a;
    color: #f00;
    display: inline-block;
    margin: .5em;
    padding: 1em;
    text-align: center;
}
a:not(#popupContactClose):hover {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
a:not(#popupContactClose):active {
    background-color: #f00;
    color: #ffa;
}

#backgroundPopup{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}

#popupContact{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:180px;/*384px;*/
width:250px;/*408px;*/
background:#FFFFFF;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}

#popupContactClose{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
}

a{
cursor: pointer;
text-decoration:none;
}

JavaScript

//SETTING UP OUR POPUP
//0 means disabled 1 means enabled
var popupStatus = 0;
function centerPopup(){
    //request data for centering
    var win = {
            height: $(document).height(),
            width: $(document).width()
        },
        pop = {
            height: $("#popupContact").height(),
            width: $("#popupContact").width()
        };
    $("#popupContact").css({
        "position": "fix",
        "top": win.height/2-pop.height/2,
        "left": win.width/2-pop.width/2
    });
    //only need force for IE6    
    $("#backgroundPopup").css({
        "height": win.height
    });   
}
function disablePopup(){
    //disables popup only if it is enabled
    if(popupStatus==1){
        $("#backgroundPopup, #popupContact").fadeOut();
        popupStatus = 0;
    }
}
function loadPopup(id){
    //centering with css
    centerPopup();
    //loads popup only if it is disabled
    if(popupStatus==0){
        $("#backgroundPopup").css("opacity", "0.7").fadeIn();
        $("#popupContact").fadeIn();
        popupStatus = 1;
        getValueOptionImage($(this).attr('id'));
    };
}
function getValueOptionImage(value) {
    $(".option_radio").unbind("change").change(function(e) {
        alert("a ID: " + value + "\nradio Value: " + $(this).val());
    });
}
$(function() {
    $("a").on("click", loadPopup);
    //CLOSING POPUP
    $("#popupContactClose").click(disablePopup);
    //Press Escape event!
    $(document).keypress(function(e){
        if(popupStatus==1 && e.which==27) disablePopup();
    });
});