为什么fancybox弹出窗口在第二次点击按钮后出现？

第二次点击“捕捉我”按钮后，Fancybox弹出窗口出现。身体部位第一次未加载。此外，我还会在按钮部分之后移动脚本代码部分。出现同样的情况。用window.load函数进行操作。没有任何变化。任何建议。为什么fancybox弹出窗口在第二次点击按钮后出现？

我想：

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

来源

2014-01-24 Abhi

这

$('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-24 19:25:15 JFK

谢谢JFK。感谢你的帮助。它正在工作。:) – Abhi

为什么fancybox弹出窗口在第二次点击按钮后出现？

回答

相关问题