创建禁用不透明引导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。