Question

我正在使用JavaScript和HTML，我有一个包含多个iframe的页面。我希望能够模糊其中的一些iframse（然后不隐藏），以便用户可以看到这些框架内的内容，但无法点击它们或输入它们。

有办法做到这一点吗？

Answer 1

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

Answer 2

我建议在每个“模糊”的iFrame上放置一个透明的DIV，以防止时钟事件向下传播。根据我的知识，iFrame标签本身并不提供您想要的功能。

对于它的价值，Web说法中的“模糊”是指将文本光标移动到控件之外！

Answer 3

这样的事情可能就是你想要的：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 4

以下是在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/

如何模糊iframe？

4 个答案: