爲什麼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彈出窗口在第二次點擊按鈕後出現？

回答

相關問題