CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ravi Mule
Ravi Mule

Reputation: 404

Remove transparency from text when clicking a particular div element.

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

After clicking on a particular div the transparency effect should be removed and the text clearly visible.

Upvotes: 0

Views: 314

Answers (2)

Suraj Rawat
Suraj Rawat

Reputation: 3763

Live example here >>

Hello Friends :)

this can easily be achieved by a single line of code via jquery library :

html

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

by using toggleClass method !

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

Upvotes: 1

Joseph
Joseph

Reputation: 1086

One way to do this would be to remove and add a class...

    #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*/
    }

Add Filter

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

Remove Filter

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

Upvotes: 0

Related Questions