jQuery и fancybox с событием click

Question

Я просто хочу знать, можно ли создать fancybox с содержимым скрытого div на событие click. Как это при нажатии кнопки:

<input type="button" class="headerButtonNormal" id="test" value="Contact information" onmouseover=this.className="headerButtonHoover" 
      onmouseout=this.className="headerButtonNormal" onclick="showFormInformation()"> 

Выполнить этот яваскрипта код и каким-то образом генерировать FancyBox:

function showFormInformation() 
{ 

} 

И это ДИВ я хочу показать:

<div id="inline"> 
Test fancybox 
</div> 

При поиске в Интернете, казалось, что fancybox не сделал этого ... он больше сделан для ссылки klicking. Должен ли я использовать другую структуру ???

Answer 1

Это прямо в рулевой рубке Fancybox!

просто сделать:

$.fancybox({ 
    content: $('#inline') 
}) 

или JFK отметил:

$.fancybox({ 
    href: '#inline' 
}) 

следует отметить, что CSS путь вашего скрытого DIV будет отличаться, когда он находится внутри вашего FancyBox.

Отметьте этот ответ (https://stackoverflow.com/a/3819374/599075) за другой подход!

Answer 2

Try:

HTML:

<input type="button" class="headerButtonNormal" id="test" value="Contact information" 
onmouseover=this.className="headerButtonHoover" onmouseout=this.className="headerButtonNormal"> 
<div id="inline">Test fancybox</div> 

JQuery:

$("#test").on("click", function() { 
    showFormInformation(); 

    return false; 
}); 

function showFormInformation() { 
    $.fancybox({ 
     content: $("#inline").html() 
    }); 
} 

Fiddle here

Вы можете переместить обработчики событий инлайн быть связанными с использованием JQuery, поскольку вы уже используют библиотеку.