Question

I’m using JavaScript with HTML and I have a page that includes multiple iframes. I want to be able to blur some of these iframse (not hide then) so that users can see what is inside these frames but cannot click on them or type in them.

Is there a way to do this?

Answer 1

Something like this may be what you want: 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;
}