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

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

时间：2011-12-03

来源：互联网

现在用JS做了一个拼图的网页应用，网页中间是拼图的主界面

有一个东西不知道怎么实现，就是有一个“查看原图”的按钮

点击后，会出现第二层，中间显示当前拼图的原图片

其实就是类似于大多数网站的“登陆的悬浮框”

请问如何实现

有类似的代码可以给我参考吗？

谢谢了。。！

作者: belin520 发布时间: 2011-12-03

HTML code

<!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>