Как использовать плагин диалога fancybox для отображения div непосредственно

Question

У меня есть функция javascript под названием confirm(), которая использует библиотеку пользовательского интерфейса JQuery для открытия диалогов.

Например:

jQuery('#confirm-popup').dialog('open'); 

Это открывает и визуализирует DIV с идентификатором confirm-popup. Я хотел бы переключиться на fancybox, поскольку он обладает эластичным эффектом, который мне нужен. Поэтому я надеялся, что следующее будет работать после того, как я установил fancybox.

jQuery('confirm-popup').fancybox(); 

Это не работает. Насколько я вижу, вы можете вызвать функцию fancybox() на якорный тег. Я не хочу использовать теги привязки, поскольку для этого потребуется много изменений кода для меня, поскольку я уже сопоставил свою подтверждающую функцию с этими тегами.

В идеале я хотел бы просто захватить элемент div и показать его аналогично методу диалога диалогового окна jQuery? Есть ли способ сделать это с Fancybox?

Answer 1

Вы можете использовать fancybox для div, но мой первый вопрос заключается в том, оставили ли вы свой # для ID? Было бы полезно, если бы вы разместили HTML-код и где вызывается ваш fancybox(), как и в документе document.ready. И вы захотите вызвать .fancybox() на том, что открывает диалог, а не непосредственно в диалоговом окне.

В случае, если вы пропустили его, это пример с сайта FancyBox:

<script> 
    $(document).ready(function() { 
     $("#inline").fancybox(); 
    }); 
</script> 
<a id="inline" href="#data">This shows content of element who has id="data"</a> 
<div style="display:none"><div id="data">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div> 

Answer 2

Если вы хотите использовать FancyBox как диалог, вы можете вызвать его непосредственно, как, например:

$.fancybox({ 
    'width'    : '60%', 
    'height'    : '65%', 
    'autoScale'   : true, 
    'hideOnContentClick' : false, 
    'href'    : someUrl, 
    'callbackOnShow'  : function(){ ... }, 
    'onClosed'   : function(){...},      
    'type'    : 'iframe' 
}); 

Answer 3

Это демонстрирует, как использовать fancybox (1.3.4), не требуя элемента связи <a href>, позвонив напрямую fancybox.

Инлайн:

<div style="display:none;"> 
    <div id="confirm-popup"> 
     dialog content 
    </div> 
</div> 

$('#myform').submit(function() { 
    $.fancybox({ 
     type: 'inline', 
     content: '#confirm-popup' 
    }); 
}); 

Iframe:

$('#myform').submit(function() { 
    $.fancybox({ 
     type: 'iframe', 
     href: 'http://www.abc123.com' 
    }); 
});