请问怎么实现点击按钮后在网页中间出现一张图片（第2层，类似于登陆的悬浮框）

现在用JS做了一个拼图的网页应用，网页中间是拼图的主界面有一个东西不知道怎么实现，就是有一个“查看原图”的按钮点击后，会出现第二层，中间显示当前拼图的原图片其实就是类似于大多数网站的“登陆的悬浮框”请问如何实现有类似的代码可以给我参考吗？谢谢了。。！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title> </head> <body>
<div style="width:1002px; height:500px; background:#000; margin:0 auto; color:#fff; font-size:22px;">底下的拼图<input type="button" value="显示原图按钮" id="btn" /></div>
    <div id="show" style="width:200px; display:none; height:200px; position:absolute; left:200px; top:200px; z-index:111; background:#fff; font-size:22px;">显示原图弹出框</div>
</body>
   <script>
document.getElementById('btn').onclick = function(){
document.getElementById('show').style.display = 'block';
};
  </script>
</html>
<script>
    document.getElementById('btn').onclick = function(){
        document.getElementById('show').style.display = 'block';
    };
  </script>