Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Картинка вместо кнопки вызывающая popup (https://javascript.ru/forum/dom-window/70323-kartinka-vmesto-knopki-vyzyvayushhaya-popup.html)

ИщуПомощь 27.08.2017 17:21

Картинка вместо кнопки вызывающая popup
 
Доброго времени суток. Такой вопрос: как сделать картинку, кликнув на которую вызывался бы попап? Картинка не простая, а с дополнительным div'ом который используется для подписи картинки. Вот код подписи картинки
.img-desc {
    margin-top: 50px; /* Отступ cверху */
margin-right: 50px; /* Отступ справа */
    margin-bottom: 50px; /* Отступ снизу */
   
position: relative;
 
display:inline-block;
 
height:400px;
 
width: 293px;
 
}
 
.img-desc cite {
    
    background: #7C4F5E;
filter:alpha(opacity=55);
 
font-style: normal;
opacity: .8;
 
color: #ffffff ;
 
position: absolute;
bottom: 0;
 
left: 0;
 
width: 293px;
 
padding: 11px;
 
border-top: 2px solid #999;
 
}



Вот тут css и html кнопки https://codepen.io/imprakash/pen/GgNMXO. Как сделать так, чтобы вместо кнопки стояла картинка с дивом-подписью?

рони 27.08.2017 17:57

ИщуПомощь,
вставить вашу картинку вместо текста в ссылку

ИщуПомощь 27.08.2017 19:08

Если вы имеете ввиду сделать вот так
<a class="button" href="#popup1"></a><img src="http://s1.iconbird.com/ico/0712/wifun/w128h1281341505270picture128.png">
</div>

То картинка стоит рядом с пустой кнопкой, и не вызывает попап при клики на неё.

рони 27.08.2017 19:15

Цитата:

Сообщение от ИщуПомощь
сделать вот так

Цитата:

Сообщение от рони
вставить вашу картинку вместо текста в ссылку

<a class="button" href="#popup1"><img src="http://s1.iconbird.com/ico/0712/wifun/w128h1281341505270picture128.png"> 
</a>

ИщуПомощь 27.08.2017 19:15

Цитата:

Сообщение от Rise (Сообщение 462870)
ИщуПомощь,
бог в помощь!

Обращались. Ждем ответа. Пока, что молчит(

ИщуПомощь 27.08.2017 19:21

Спасибо за помощь. Всё работает.


Часовой пояс GMT +3, время: 07:46.