Как размыть фрейм?

Question

Я использую JavaScript с HTML, и у меня есть страница с несколькими фреймами. Я хочу иметь возможность размыть некоторые из этих iframse (а не скрывать их), чтобы пользователи могли видеть, что находится внутри этих фреймов, но не могли нажимать на них или вводить их.

Есть ли способ сделать это?

Answer 1

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

Answer 2

Нечто подобное может быть тем, что вы хотите: 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 3

Вот демонстрация способа использования оверлея внутри 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/

Answer 4

Я бы предложил расположить прозрачный DIV над каждым «размытым» фреймом, чтобы предотвратить распространение событий часов вниз.Сами теги iFrame, насколько мне известно, не обеспечивают нужную вам функциональность.

И что стоит, «размытие» на веб-языке означает перемещение текстового курсора вне элемента управления!