單擊特定div元素時從文本中移除透明度。

Question

#popup_box2 { 
_position:absolute; /* hack for internet explorer 6 */  
height:350px;  
width:600px;  
background:#FFFFFF;  
left: 33%;/*300px;  */ 
right:30%; 
text-align:left; 
top: 150px;  
z-index:100; /* Layering (on-top of others), if you have lots of layers: I just maximized, you can change it yourself */  
margin-left: 0;   /* additional features, can be omitted */  

padding:15px;  
font-size:15px;  
-moz-box-shadow: 0 0 15px #ff0000;  
-webkit-box-shadow: 0 0 15px #ff0000;  
box-shadow: 0 0 15px lightblue; 
background-color: rgba(255, 255, 255, 0.9); /* Color white with alpha 0.9*/ 
filter:alpha(opacity=50); opacity:0.5; 
} 

點擊一個特定的div後，應該刪除透明效果，文字清晰可見。要做到這一點是刪除和添加一個類

Answer 1

的一種方式......

#popup_box2 { 
    _position:absolute; /* hack for internet explorer 6 */  
    height:350px;  
    width:600px;  
    background:#FFFFFF;  
    left: 33%;/*300px;  */ 
    right:30%; 
    text-align:left; 
    top: 150px;  
    z-index:100; /* Layering (on-top of others), if you have lots of layers: I just maximized, you can change it yourself */  
    margin-left: 0;   /* additional features, can be omitted */  
    padding:15px; 
    font-size:15px;  
    -moz-box-shadow: 0 0 15px #ff0000;  
    -webkit-box-shadow: 0 0 15px #ff0000;  
    box-shadow: 0 0 15px lightblue; 
    background-color: rgba(255, 255, 255, 0.9); /* Color white with alpha 0.9*/ 
    } 
#popup_box2.filter { 
    filter:alpha(opacity=50); opacity:0.5; 
/*Or whatever css items that you want toggled*/ 
    } 

添加過濾器

$('ELEMENTselectorHERE').click(function(){ 
$('#popup_box2').addClass('filter'); 
}); 

刪除篩選

$('ELEMENTselectorHERE').click(function(){ 
$('#popup_box2').removeClass('filter'); 
}); 

Answer 2

Live example here >>

個

朋友你好:)

這可以很容易地通過一個單一的代碼行通過jQuery庫來實現：

HTML

<div id="popup_box2" class="opacityfilter"><button class="clickme">Click me to add and remove effect</button> </div> 

使用toggleClass方法！

jQuery的

$('.clickme').click(function(){ 
     $('#popup_box2').toggleClass('opacityfilter'); 
}); 

的CSS

.opacityfilter { 
    _position:absolute; /* hack for internet explorer 6 */  
    height:350px;  
    width:600px;  
    background:#FFFFFF;  
    left: 33%;/*300px;  */ 
    right:30%; 
    text-align:left; 
    top: 150px;  
    z-index:100;  
    margin-left: 0;   
    padding:15px;  
    font-size:15px;  
    -moz-box-shadow: 0 0 15px #ff0000;  
    -webkit-box-shadow: 0 0 15px #ff0000;  
    box-shadow: 0 0 15px lightblue; 
    background-color: rgba(255, 255, 255, 0.9); /* Color white with alpha 0.9*/ 
    filter:alpha(opacity=50); opacity:0.5; 
    }