<style>
.b {
background-color: rgba(0, 0, 0, 0.3);
height: 100%;
width: 100%;
float: left;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: none;
}

.b div {
    height: 50%;
    width: 50%;
    background-color: yellow;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.a {
    background-color: red;
    height: 100%;
    width: 100%;
    color: black;
    position: relative;
}

</style>

<script language="javascript">

function DisplayDialog(divId) {
    document.getElementById(divId).style.display ="block";
}

function CloseDialog(divId) {
    document.getElementById(divId).style.display ="none";
}

</script>

<div class="a">
<div class="dasd">
<span onClick="DisplayDialog('aa')" style="cursor:pointer;">sadasdas</span>
<input type="checked" />
</div>
<div class="b" id="aa">
<div>
<input type="radio" name="sadas">
<span>asdasdas</span>
<input type="radio" name="sadas">
<span>asdasdas</span>
<button onClick="CloseDialog('aa')" style="cursor:pointer;">Close</button>
</div>
</div>
</div>
</div>