<!DOCTYPE html>
<html>
<style>
#modal {
position: fixed;
display: none;
z-index: 4;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 40px;
overflow: auto;
cursor: pointer;
background: #000000;
filter: alpha(opacity=40);
-khtml-opacity: 0.4;
-moz-opacity: 0.4;
opacity: 0.4;
}
</style>
<body>
<button onclick="test()">M o d a l</button>
<div id="modal"><h2>M O D A L</h2></div>
<script>
function test(){
el=document.getElementById('modal');
el.style.display="block";
el.onclick=function(){this.style.display="none";}
}
</script>
</body>
</html>