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?
4 respuestas
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;
}
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);
});
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.
iframe.contents().find('body').blur()
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.