創建禁用不透明引導3？

Question

我使用自舉3，與面板我需要創建內部面板不透明的機構，用戶不能點擊鏈接，這是我的工作小提琴

http://jsfiddle.net/52VtD/9230/

的問題是，不透明度始終得到充分屏幕我只需要在面板體內？ 我只需要使用CSS，這是可能的嗎？

這裏是我到目前爲止的代碼

<div class="panel panel-primary"> 
    <div class="panel-heading"> 
     <h3 class="panel-title">Panel title</h3> 
    </div> 
    <div class="panel-body"> 
     <a href="#">I dont want allow user to clikc on this link</a> 
    </div> 
</div> 

CSS

.panel-body:before{ 
    position: fixed; 
    z-index: 999; 
    width: 100%; 
    height: 100%; 
    text-align: center; 
    background: rgba(0,0,0,0.8); 
} 

UPDATE

我必須找出更好的解決辦法

.panel-body{ 
    opacity: .7; 
    pointer-events: none; 
} 

Answer 1

我過去這樣做的方式是通過製作容器（即你想要放置透明蓋子的東西）有position:relative，然後在該容器中創建一個div，其中height:100%和position:absolute。然後覆蓋整個父分區。這是一個完整的工作示例。

HTML

<div class="container"> 
    <p>Ahoy, I'm some text</p> 
    <p><a href="#">And I'm a link!</a></p> 
    <img src="http://placehold.it/100" alt="I'm an image"/> 

    <div class="cover"></div> 

</div> 

CSS

.container{ 
    position:relative; 
    border:2px solid #663399; 
    padding:5px; 
} 
.cover { 
    background-color: #fff; 
    height: 100%; 
    left: 0; 
    opacity: 0.9; 
    position: absolute; 
    top: 0; 
    width: 100%; 
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90); /*Yay for old IE support...*/ 
} 

jsFiddle working example

通過只使用一個半透明的div覆蓋的元素中他們立即讓他們不可點擊，所以沒有必要亂用pointer-events，但它確實需要你有一個相對定位的容器div。