Почему всплывающее окно fancybox появляется после второго нажатия кнопки?

Всплывающее окно Fancybox появляется после второго нажатия кнопки «захватить меня». Части тела не загружаются в первый раз. Также я перемещаю секцию кода скрипта после раздела кнопки. Появляется Samething. Проводится с функцией 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 появляется после второго нажатия кнопки?

ответ

Смежные вопросы