Estoy usando JavaScript con HTML y tengo una página que incluye varios iframes. Quiero poder desenfocar algunos de estos iframse (no ocultarlos) para que los usuarios puedan ver lo que hay dentro de estos marcos pero no puedan hacer clic en ellos o escribirlos.

¿Hay alguna manera de hacer esto?

1
Bahar Narenj 26 jul. 2011 a las 03:11

4 respuestas

La mejor respuesta

Algo como esto puede ser lo que desea: http://jsfiddle.net/Paulpro/xcWcn/1/

Html:

<div id="frame1-blocker" class="frame-blocker"></div>
<iframe id="frame1" src="http://google.com" style="width: 500px; height: 300px; padding: 0px; border: 0px;"/>

Css:

.frame-blocker{
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    width: 500px;
    height: 300px;
}
0
Paul 26 jul. 2011 a las 20:07

Aquí hay una demostración de una forma de usar una superposición dentro del iframe:

#hidden {
    display: none;
}
iframe {
    width: 200px;
    height: 200px;
}
a {
    color: #f00;
    text-decoration: underline;
    cursor: pointer;
}

<div>
    <a class="activate" rel="1">Active Test 1</a><br/>
    <a class="activate" rel="2">Active Test 2</a><br/>
    <a class="activate" rel="3">Active Test 3</a>
</div>
<iframe id="test1"></iframe>
<iframe id="test2"></iframe>
<iframe id="test3"></iframe>
<div id="hidden">
    <div id="overlay" style="display: none; position: absolute; left: 0; top: 0; z-index: 100; background-color: #000;"></div>
    <div>
        <a href="http://www.yahoo.com/" target="_blank">http://www.yahoo.com/</a>
    </div>
</div>

$('iframe').each(function(){
    $(this).contents().find('body').append($('#hidden').html());
});
$('div a.activate').click(function(){
    $('iframe[id^=test]').contents().find('#overlay')
        .css('height','200px')
        .css('width','200px')
        .fadeTo('fast', 0.5);
    $('iframe#test'+this.rel).contents().find('#overlay')
        .css('height','0')
        .css('width','0')
        .fadeTo('fast', 1);
});

http://jsfiddle.net/ZTpXa/

-1
Jared Farrish 25 jul. 2011 a las 23:56

Sugeriría colocar un DIV transparente sobre cada iFrame "borroso" para evitar que los eventos del reloj se propaguen hacia abajo. Las etiquetas iFrame en sí mismas no proporcionan la funcionalidad que usted desea.

Y para lo que vale, "desenfoque" en lenguaje web se refiere a mover el cursor de texto fuera de un control.

0
Winfield Trail 25 jul. 2011 a las 23:15
iframe.contents().find('body').blur()
1
Juan Mellado 2 abr. 2012 a las 13:31