把透明度放在除div之外

时间:2012-01-17 00:39:10

标签: html click transparency

我正试图找到一种方法,在除了一个div之外的所有内容中都有一些透明度。只是为了允许点击该特定div。这可能是一个简单的问题,但我真的没有想法在哪里找到答案。我认为这可能类似于模态对话效果...但是我的特定div ...

4 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:1)

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

我的回答应该可以解决你的问题:

CSS suppress screen like Javascript alert

创建一个具有位置的div:fixed,即100%的高度和宽度。然后将背景设置为rbga(255,255,255,.8)或重复的1px方形白色不透明png(使用您选择的不透明度)。使用具有不透明白色背景的div叠加内容会产生与降低基础内容的实际不透明度相同的效果。

答案 2 :(得分:1)

这是内置于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;
}

答案 3 :(得分: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});
相关问题