将透明度除 div 之外的所有内容答案

【问题标题】：put transparency everything except div将透明度除 div 之外的所有内容
【发布时间】：2012-01-17 00:39:10
【问题描述】：

我正在尝试找到一种方法来使除一个 div 之外的所有内容都具有一定的透明度。只是为了允许点击那个特定的 div。这可能是一个简单的问题，但我真的不知道在哪里可以找到答案。我认为这可能类似于模态对话框效果...但使用我的特定 div...

【问题讨论】：

你的代码在哪里？你试过什么？

【解决方案1】：

因为它被标记为 jQuery

$('#fields input:not(#the_one_field_to_stay_active)').attr('disabled');
$('#fields textarea:not(#the_one_field_to_stay_active)').attr('disabled');
$('#fields *:not(#the_one_field_to_stay_active)').click(function() {return false});
$('#fields *:not(#the_one_field_to_stay_active)').css({opacity: 0.8});

【讨论】：

嗨，凯尔...我不明白这个解释，但还是谢谢。稍后我会回到这个问题，然后我会尝试你的回复..
前两行禁用所有输入字段和文本区域，除了您想要激活的。第三个禁用任何锚标签，第四个使所有禁用的元素半透明
毫无疑问。看看你是否在关注
谢谢凯尔...它工作完美！我没有用正确的 div id 更改#fields，所以我没有得到它。再次感谢。

【解决方案2】：

试试jquery overlay。它应该满足您的需求。

【讨论】：

【解决方案3】：

这是内置在 jQuery UI 中的，因此您不需要使用任何额外的插件。只需包含 UI 文件和 jQuery。并将单词“jQuery”替换为“$”。确保为“obj”参数传递的参数值是 div 标签的 id。请注意，我们为“dData”引用了一个页面，因此如果您必须重新使用此对话框或共享此对话框，您可以重新使用它。但是，如果您希望以其他方式定义数据，则可以进行更改。

<script type="text/javascript" src="/scripts/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/scripts/jquery-ui-1.8.10.custom.min.js"></script>

// dTitle - title of the modal dialog being displayed
// dWidth - width as a fraction of 1 relative to the width of the window
// dHeight - height as a fraction of 1 relative to the height of the window
// dData - the URL and query string of the page being requested within the object tag
// obj - id of <div> tag
// objType - type of object (ie: "text/html", "application/pdf", etc...)
function DisplayModalHTML(dTitle, dWidth, dHeight, dData, obj, objType) {
    var content = "<object id='jQueryObject' type='" + objType + "' data='" + dData + "' width='100%' height='100%' />";
    jQuery(obj).empty();
    jQuery(obj).attr("title", dTitle);
    jQuery(obj).html(content);
    jQuery(obj).dialog({
        autoOpen: true,
        modal: true,
        width: jQuery(window).width() * dWidth,
        height: jQuery(window).height() * dHeight,
        resizable: true,
        draggable: true,
        buttons: {

            'Close Report': function() { jQuery(this).dialog('close'); }
        }
    });

    return false;
}

【讨论】：

嗨 macgyver...这听起来是个不错的方法...代替带有数据的对象，我可以像使用内部其他元素的普通 div 一样使用吗？
当然，只需将“var content = X”（上方）行中的 X 替换为您的内容即可。我上面的

【解决方案4】：

你不需要 jquery。你可以单独使用 CSS。

我的回答应该能解决你的问题：

CSS suppress screen like Javascript alert

使用 position: fixed 创建一个 100% 高度和宽度的 div。然后将背景设置为 rbga(255,255,255,.8) 或重复的 1px 方形白色不透明 png（具有您选择的不透明度）。使用不透明的白色背景覆盖 div 内容与降低底层内容的实际不透明度效果相同。

【讨论】：

感谢 j-man... 好帖子！我会对其进行测试，然后提供反馈。