把透明度除div div

Question

我試圖找到一種方法來在一切除了一個div的一切透明度。只是爲了允許點擊特定的div。這可能是一個簡單的問題，但我真的沒有想法在哪裏找到答案。我認爲這可能是像模態對話框效果...但與我的具體分區...

Answer 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}); 

Answer 2

嘗試jquery overlay。它應該滿足您的需求。

Answer 3

你不需要jquery。你可以單獨使用CSS。

我在這裏的答案應該解決您的問題：

CSS suppress screen like Javascript alert

創建一個位置一個div：固定是100％的高度和寬度。然後將背景設置爲rbga（255,255,255，.8）或重複的1px方形白色不透明PNG（或者選擇不透明度）。使用不透明白色背景的div疊加內容可以降低底層內容的實際不透明度。

Answer 4

這是內置於jQuery UI，所以你不需要使用任何額外的插件。只需包括與jQuery一起的UI文件。並用「$」替換單詞「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; 
}