Activación FancyBox de un DIV onclick ();

Question

Esta pregunta parece haber sido preguntado mucho, pero no he visto una respuesta que funciona.

Así que tengo un div que funciona de esta manera:

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

Ahora necesito el enlace (especificado en location.href) para abrir en un marco flotante FancyBox.

Me encantaría usar un elemento pero esto Div ejerce en otros artículos, así que no creo que pueda.

Estoy abierto a todas las sugerencias ... incluso utilizando elementos distintos de divs, o usando una caja de luz jQuery iframe diferente.

Gracias

Tim Mohr

Answer 1

a) se puede poner otros artículos dentro de una etiqueta, que funcionará pero es unsemantic.

b)

1. poner su marco flotante en un div oculto (o ajax en el clic)
2. el hacer $ ( 'MENUITEM'). Click (hiddendiv.fancyb ... (). Show ())

En lo personal siempre me gustaría evitar el uso de onclick = "" Es mucho más fácil de mantener su código en un archivo externo de JS

Answer 2

Esto demuestra cómo utilizar FancyBox sin que el elemento de enlace <a href>.

Inline (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'
    });
});

Inline (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'
    });
});

Answer 3

que estaba haciendo lo mismo y quería invocar dinámicamente también FancyBox Sé que puede no ser ideal, pero esto es lo que hice (utilizo jQuery por cierto):

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>

que es una forma más rápida más fácil; He encontrado, espero que ayude a alguien! feliz codificación!