iframeをぼかす方法は？

Question

私はHTMLでJavaScriptを使用していますが、複数のiframeを含むページがあります。私はこれらのフレームの一部をぼかすことができるようにしたいので、ユーザーはこれらのフレーム内にあるものを見ることができますが、それらをクリックしたりタイプしたりすることはできません。

これを行う方法はありますか？

Answer 1

何かがあなたが望むことがあります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; 
} 

Answer 2

は私が下向きに伝播するクロックイベントを防ぐために、それぞれの「ぼやけ」のiFrameの上に透明DIVを配置することをお勧め。 iFrameタグ自体は私の知る限り、必要な機能を提供していません。

そして、それは価値がある何のために、ウェブ用語で「ぼかし」コントロールの外にテキストカーソルを移動を意味し！このような

Answer 3

ここではインラインフレーム内のオーバーレイを使用した方法のデモです：

#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/

Answer 4

iframe.contents().find('body').blur()