0

第二次单击“捕获我”按钮后会出现 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

2

这个

$('a#inline').fancybox();

...不会触发fancybox，它只是将选择器绑定#inline到fancybox，但您仍然需要click在该选择器上触发它；所以如果你这样做

$('#inline').click(function(){
    $('a#inline').fancybox();
});

...第一个click只允许fancybox被绑定#inline，只有第二个click会触发它。

你可以做的是：

$(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);
            }
        });
    }).fancybox();
});
于 2014-01-24T19:25:15.623 回答