0

「capture me」ボタンを 2 回クリックすると、Fancybox ポップアップ ウィンドウが表示されます。本体部分は初めて読み込まれません。また、ボタン セクションの後にスクリプト コード セクションを移動します。同じことが表示されます。window.load関数で試しました。何も変わりません。これに関する任意の提案。

私は試した ：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <style type="text/css">
        .fancybox-custom .fancybox-skin {
            box-shadow: 0 0 50px #222;
        }

        body {
            max-width: 700px;
            margin: 0 auto;
        }
    </style>
        <script type="text/javascript" src="html2canvas.js?rev032"></script> 
            <script type="text/javascript" src="../lib/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="../lib/jquery.mousewheel.pack.js?v=3.1.3"></script>
        <script type="text/javascript" src="../source/jquery.fancybox.pack.js?v=2.1.5"></script>
            <link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.5" media="screen" />
            <link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
    <script type="text/javascript" src="../source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
        <link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
    <script type="text/javascript" src="../source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
        <script type="text/javascript" src="../source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>

    <script type="text/javascript">
$(document).ready(
             function(){
                $('#inline').click(function() {
                alert("Hi");
                    html2canvas($('#testdiv'), {
                        onrendered: function (canvas) {
                            var img = canvas.toDataURL("image/png");
                            $('#image').attr('src', img).fadeIn(200);
                            $('a#inline').fancybox();
                            }
                    });

                });
            });
 </script>    
</head>
<body>  
<div id="testdiv">
   <h1>Testing</h1>
   <h4>One column:</h4>
   <table border="1">
     <tr>
       <td>100</td>
     </tr>
    </table>
    <br/>
</div>
<a href = '#showThisDiv' id='inline'><input type = "button" value = "Capture Me"></a>
<div style='display:none;'>
    <div id='showThisDiv' style='width:300px; height:300px;'>
        <img src="" id="image"/>
    </div>
</div>
</body>
</html>
4

1 に答える 1