Запуск FancyBox из DIV onclick (); - PullRequest
Новая
       21

Запуск FancyBox из DIV onclick ();

3 голосов
/ 18 марта 2010

Этот вопрос, кажется, задавался много, но я не видел ответа, который работает.

Итак, у меня есть div, который работает так: 

<div onclick="location.href='http://www.abc123.com';" class="menuitem">
</div>

Теперь мне нужна ссылка (указанная в location.href), чтобы открыть ее в окне fancybox.

Я хотел бы использовать элемент A , но этот Div содержит другие элементы, поэтому я не думаю, что смогу.

Я открыт для всех предложений ... даже с использованием элементов, отличных от div, или с использованием другого лайтбокса jquery iframe.

Спасибо

Тим Мор

Ответы [ 3 ]

21 голосов
/ 17 октября 2012

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

Встроенный (1.3.4): 

<div id="menuitem" class="menuitem"></div>

<div style="display:none;">
    <div id="dialogContent">
    </div>
</div>

$('#menuitem').click(function() {
    $.fancybox({
        'type': 'inline',
        'content': '#dialogContent'
    });
});

Встроенный (2.1.5): 

<div id="menuitem" class="menuitem"></div>

<div style="display:none;">
    <div id="dialogContent">
    </div>
</div>

$('#menuitem').click(function() {
    $.fancybox({
        'type': 'inline',
        'href': '#dialogContent'
    });
});

Iframe 

<div id="menuitem" class="menuitem"></div>

$('#menuitem').click(function () {
    $.fancybox({
        type: 'iframe',
        href: 'http://www.abc123.com'
    });
});
1 голос
/ 18 марта 2010

а) Вы можете поместить другие элементы в тег, это будет работать, но это не семантически.

б)

  1. поместите свой iframe в скрытый div (или вставьте его в клик)
  2. the do $ ('. Menuitem'). Click (hiddendiv.fancyb ... (). Show ())

Лично я бы всегда избегал использования onclick = "", намного проще поддерживать ваш код во внешнем js-файле

0 голосов
/ 04 июля 2012

Я делал то же самое и хотел также динамически вызывать fancybox Я знаю, что это не может быть идеальным, но это то, что я сделал (я использую jquery кстати):

JS: 

jQuery(document).ready(function($){
    $(".fancybox").fancybox();
    $("form").submit(function(){
        $(".fancybox").trigger("click");
        return false;
    });
});

HTML: 

<a href="#div_id" class="fancybox"></a>
<div style="display:none;">
     <div id="div_id">
         This will show up in my fancybox
     </div>
</div>

это более простой способ; Я нашел, надеюсь, это поможет кому-то! Удачного кодирования!

...