javascript - 单击特定的 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

Live example here >>

你好 friend :)

这可以通过 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;
    }