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 >>

你好朋友：）

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

Answer 2

执行此操作的一种方法是删除并添加一个类......

    #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');
});

单击特定div元素时从文本中删除透明度。

2 个答案: