Триггер FancyBox из DIV onclick();

Question

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

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

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

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

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

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

Благодаря

Tim Mohr

Answer 1

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

б)

1. положить IFRAME в скрытом DIV (или АЯКС его по щелчку)
2. Д.О. $ ('MENUITEM'). Выберите (hiddendiv.fancyb ...() .show())

Лично я бы всегда не использовать OnClick = «» это гораздо легче поддерживать свой код во внешнем JS файл

Answer 2

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

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> 

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

Answer 3

Это демонстрирует, как использовать 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' 
    }); 
});