Изменение стиля CSS при нажатии кнопки?

Я хотел бы изменить некоторые свойства стиля CSS на элементе div, когда я нажимаю кнопку, но у меня нет такого опыта, и я не могу найти что-либо онлайн, чтобы помочь мне. В настоящий момент так выглядит мой код.Изменение стиля CSS при нажатии кнопки?

<button class="button1">Click</button> 
<div class="popup_middle"> 
</div> 
<div class="grayout"> 
</div>

и мой CSS выглядит следующим образом

.grayout { 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 100%; 
    z-index: 99; 
    visibility: hidden; 
    background-color: #000; 
    filter: alpha(opacity = 55); 
    opacity:.80; 
} 

.popup_middle{ 
    position: fixed; 
    background: url(../images/bg-food-order.jpg); 
    border: none; 
    top: 50%; 
    left: 50%; 
    width: 350px; 
    height: 250px; 
    margin-top: -125px; 
    margin-left: -175px; 
    z-index: 100; 
    visibility: hidden; 
}

Пожалуйста, вы мольбы могли бы дать мне несколько советов или образец кода с JS, который собирается решить мою проблему.

Спасибо заранее, Дэвид

источник

2014-02-12 zbora23

Вы пробовали сделать это самостоятельно? Можем ли мы увидеть этот JS-код? Вы использовали тег jQuery, но я не могу сказать, используете ли вы его или нет. – stackErr

Вы можете добавить класс на клик и дать в этом классе необходимые свойства css –

все, что у меня есть, это часть кнопки – zbora23

Что-то вроде

<script type='text/javascript'> 

$('.button1').click(function() { $('.popup_middle').hide().css('color', 'blue'); }); 

</script>

скрыть бы, что popup_middle DIV и установить голубой цвет текста при нажатии на кнопку. click() - обработчик события

источник

2014-02-12 21:06:20

Почему вместо этого вы используете метод' .hide() '? –

га это все равно. я отредактирую его (пока нет ни одного стиля) –

Вы используете getElementById, который будет искать элементы с идентификатором. В разделе, которое вы ищете, есть класс, но нет идентификатора. Поэтому, когда вы запускаете код, который у вас есть, ничего не происходит, потому что javascript не может найти какой-либо элемент с id из popup_middle.

Чтобы исправить это, вы можете изменить div иметь Id из popup_middle и ваш CSS должен иметь #popup_middle.

HTML:

<button onClick="document.getElementById('popup_middle').style.visibility='visible';">Cli‌ck</button> 
<div id="popup_middle"></div> 
<div class="grayout"></div>

CSS:

.grayout { 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 100%; 
    z-index: 99; 
    visibility: hidden; 
    background-color: #000; 
    filter: alpha(opacity=55); 
    opacity:.80; 
} 
#popup_middle { 
    position: fixed; 
    background: green; 
    border: none; 
    top: 50%; 
    left: 50%; 
    width: 350px; 
    height: 250px; 
    margin-top: -125px; 
    margin-left: -175px; 
    z-index: 100; 
    visibility: hidden; 
}

скрипку: http://jsfiddle.net/eLJYZ/2/

источник

2014-02-12 21:17:30 stackErr

Изменение стиля CSS при нажатии кнопки?

ответ

Смежные вопросы