Удалить прозрачность из текста при щелчке на конкретном элементе div.

Question

Удалить прозрачность из текста при щелчке на конкретном элементе div.

0

#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 эффект прозрачности должен быть удален, и текст будет хорошо виден.

Ravi Mule 18 фев. 2014, в 08:36

Источник

Теги:

javascript

jquery

html

css

2 ответа

1

Живой пример здесь >>

Здравствуйте друзья :)

это может быть легко достигнуто с помощью одной строки кода через библиотеку 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;
    }

suraj rawat 18 фев. 2014, в 04:58

Ещё вопросы

Joseph · Accepted Answer · 2014-02-18T05-40-00.000Z

Один из способов сделать это - удалить и добавить класс...

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