title: Open fancy box on button click in Magento 1.9
body: <p>I want to open HTML form in fancy box when button is clicked.</p>
  
  <p>At present form is open in bottom of page not in fancy box.</p>
  
  <p>Please have a look in my code</p>
  
  <p>Layout/custommodule.xml file</p>
  
  <pre><code>&lt;default&gt;
      &lt;reference name="head"&gt;
          &lt;action method="addItem"&gt;&lt;type&gt;skin_js&lt;/type&gt;&lt;name&gt;js/custom_module/custommodule.js&lt;/name&gt;&lt;/action&gt;
  
          &lt;action method="addJs"&gt;&lt;script&gt;custom_module/jquery-1.9.0.min.js&lt;/script&gt;&lt;/action&gt;
          &lt;action method="addJs"&gt;&lt;script&gt;custom_module/jquery.fancybox.js&lt;/script&gt;&lt;/action&gt;
          &lt;action method="addJs"&gt;&lt;script&gt;custom_module/jquery.fancybox.pack.js&lt;/script&gt;&lt;/action&gt;
          &lt;action method="addJs"&gt;&lt;script&gt;custom_module/jquery.mousewheel-3.0.6.pack.js&lt;/script&gt;&lt;/action&gt;
          &lt;action method="addJs"&gt;&lt;script&gt;custom_module/jquery.noconflict.js&lt;/script&gt;&lt;/action&gt;
          &lt;action method="addCss"&gt;&lt;stylesheet&gt;css/custom_module/custommodule.css&lt;/stylesheet&gt;&lt;/action&gt;
          &lt;action method="addCss"&gt;&lt;stylesheet&gt;css/custom_module /jquery.enter code herefancybox.css&lt;/stylesheet&gt;&lt;/action&gt;
      &lt;/reference&gt;
  &lt;/default&gt;
  </code></pre>
  
  <p>custommodule.js file code for open fancybox</p>
  
  <pre><code>function loadcustomform(reloadurl){
  
  new Ajax.Request(reloadurl, {
      method: 'post',
      parameters: Form.serialize($('product_addtocart_form')),
      onSuccess: function(transport) {
          var json = transport.responseText.evalJSON();
          var displayString = json.message;
          if(json.success) {
              jQuery('body').append('&lt;div id="output-div"&gt;&lt;/div&gt;');
              jQuery('#output-div').html('');
              jQuery('#output-div').html(json.request_form);
              jQuery.fancybox({
                  type: 'ajax',
                  width:200,
                  height:100,
                  fitToView: false,
                  content: jQuery('#output-div'),
                  modal: false
              });
          }
      }
  });
  </code></pre>
  
  <p>}</p>
  
  <p>Hint : If I comment the line </p>
  
  <pre><code>&lt;action method="addItem"&gt;&lt;type&gt;skin_js&lt;/type&gt;&lt;name&gt;js/lib/jquery-1.10.2.min.js&lt;/name&gt;&lt;/action&gt; 
  </code></pre>
  
  <p>in <code>frontend/rwd/default/layout/page.xml</code> then fancy box is open properly.</p>
  
  <p>Please help me on this.
  Thanks.</p>