js弹出div显示当前页面的预览效果?

求解：在当前页面中（是aspx页面），对页面中所有输入或上选中的信息进行预览。
用js弹出div显示当前页面的预览效果。
如：
    用户名: XXXX
    性别：X女 X男
    联系方式:xxxx  预览效果  确定在用户名等input中输入信息及选中单选\复选按钮后，点击“预览效果”按钮，在当前前页面弹出一div显示效果
点击“确定”按钮，回到当前页面。
   
求解，各位大虾们帮帮忙！先在此谢谢各位！一有解决，立马给分！谢谢！

解决方案 »

  1.   

    1.引入jquery:这样比较简单，找了点代码你参考一下：
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
    <script src ="jquery.js" type="text/javascript"></script>
     </HEAD>
    <script type="text/javascript">
    $(function(){
     $(".but").click(function(){
      var str = "这里是信息内容，这里是信息内容！";
      $(".form").html(str);
      $("#faqbg").css({display:"block",height:$(document).height()});
      var yscroll =document.documentElement.scrollTop;
      $("#faqdiv").css("top","100px");
      $("#faqdiv").css("display","block");
      document.documentElement.scrollTop=0;
     });
     $(".close").click(function(){
      $("#faqbg").css("display","none");
      $("#faqdiv").css("display","none");
     });
    })
    </script>
    <style type="text/css">
    body,h2{margin:0 ; padding:0;}
    #faqbg{background-color:#666666; position:absolute; z-index:99; left:0; top:0; display:none; width:100%; height:1000px;opacity:0.5;filter: alpha(opacity=50);-moz-opacity: 0.5;}
    #faqdiv{position:absolute;width:400px; left:50%; top:50%; margin-left:-200px; height:auto; z-index:100;background-color:#fff; border:1px #8FA4F5 solid; padding:1px;}
    #faqdiv h2{ height:25px; font-size:14px; background-color:#8FA4F5; position:relative; padding-left:10px; line-height:25px;}
    #faqdiv h2 a{position:absolute; right:5px; font-size:12px; color:#FF0000}
    #faqdiv .form{padding:10px;}
    </style>
    </head>
    <body ><div id="faqbg"></div>
    <div id="faqdiv" style="display:none">
    <h2>预览窗口<a href="#" class="close">确定</a></h2>
        <div class="form">
        获取的已填写内容    </div>
    </div><p>&nbsp;</p>
    <p align="center">
      <input value="弹出" class="but" type="button" />
      <input type="button" value="关闭" class="close" />
    </p>
    </body>
    </html>
      

  2.   

    用一个层，里面放一个iframe，将src指向当前页面
      

  3.   

    谢谢各位，我已实现了。在当页面写一个层，js调用每个input的id值。就可了。