Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.80/5: Рейтинг темы: голосов - 5, средняя оценка - 4.80
WitcherAlex
0 / 0 / 0
Регистрация: 10.11.2018
Сообщений: 56
1

При нажатии на картинку вывести окно сообщения с текстом

25.11.2018, 16:40. Просмотров 882. Ответов 3
Метки нет (Все метки)

Привет, нужна помощь. У меня есть картинка, как при нажатии на нее сделать так, чтобы мне вывелось сообщение отдельным блоком, и при еще одном нажатии сообщение скрывалось.
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
25.11.2018, 16:40
Ответы с готовыми решениями:

При нажатии на кнопку вывести окно с текстом
Здравствуйте, у меня есть один вопрос. На моей форме происходит вычисление, и результат...

При нажатии на клавиатуре Интер вывести окно сообщения
Установить курсор в конец текста. При нажатии на клавиатуре кнопки Enter должно выводиться окно...

Показать окно с текстом при нажатии на кнопку
Как сделать что бы при нажатии на баттон выдавалось окно с текстом которое я напишу

Всплывающее окно , появляющееся при нажатии на картинку
Здравствуйте . Столкнулся с такой проблемой : необходимо вывести всплывающее окно с текстом при...

при нажатии на кнопку, должна вызваться функция, которая генерирует новое окно, с новым фоном, заголовком и текстом
Насколько я понимаю, пр нажатии на кнопку, должна вызваться функция, которая генерирует новое окно,...

3
scivola
45 / 27 / 20
Регистрация: 22.05.2018
Сообщений: 94
25.11.2018, 18:03 2
Вот пример
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.picture, .close {
    width: 100px;
    height: 100px;
    background-color: red;
}
            
#modal {
    width: 100px;
    height: 100px;
    background-color: green;
    margin: 0 auto;             
    display: none;
    pointer-events: none;  
}
            
#modal:target {             
    display: block;
    pointer-events: auto;
}
HTML5
1
2
3
4
5
<a class="picture" href="#modal">Это картинка</a>
        
<div id="modal">
    <a class="close" href="#close">X</a>        
</div>
0
WitcherAlex
0 / 0 / 0
Регистрация: 10.11.2018
Сообщений: 56
25.11.2018, 18:15  [ТС] 3
scivola, А как сделать так, чтобы текст закрывался, кликнув по любой области экрана?
0
scivola
45 / 27 / 20
Регистрация: 22.05.2018
Сообщений: 94
26.11.2018, 06:06 4
Вот Вам код модального окна. Результат действия кода смотрим здесь.

HTML5
1
2
3
4
5
6
7
8
9
<a class="picture" href="#modal">Это картинка</a><!--Нажать на ссылку, чтобы войти-->        
 
<div id="modal" class="wrapper">
  <a class="substrate" href="#close"></a> <!--Нажать на серый фон, чтобы выйти-->
  <div class="block">
    <a class="close" href="#close">x</a><!--Нажать на крестик, чтобы выйти-->
    Это модальное окно
  </div> 
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
.picture { /* Это картинка <a class="picture" href="#modal"> красного цвета*/
    width: 100px;
    height: 100px;
    background-color: red;    
}
.wrapper  { /* Это прозрачная обертка <div id="modal" class="wrapper">, растянутая по всему экрану и находящаяся поверх всех элементов страницы*/
    width: 100vw;
    height: 100vh;
    background-color: transparent; 
    position: absolute;
    top: 0;
    left: 0;  
} 
.substrate { /* Это подложка  <a class="substrate" href="#close"> серого цвета с прозрачностью, растянутая по границам обертки <div id="modal" class="wrapper">*/
    width: 100%;
    height: 100%;
    background-color: rgba(100, 100, 100, 0.6);   
    position: absolute;
    top:0;
    left: 0;
}
.block { /* Это блок  <div class="block"> синего цвета внутри обертки <div id="modal" class="wrapper">*/
    width: 100px;
    height: 100px;
    background-color: rgba(0, 0, 255, 1);   
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}
.close { /* Это закрывашка <a class="close" href="#close"> блока <div class="block"> , обозначенная крестиком*/ 
   color: red;
   font-weight: bold;   
}
#modal { /* Это состояние обертки (модального окна), когда оно в "покое": его не видно и на она не реагирует на нажатие*/        
    display: none;
    pointer-events: none;  
}
#modal:target{  /* Это состояние обертки (модального окна), когда мы на него ссылаемся, нажимая на карктинку <a class="picture" href="#modal">: обертка становится видимой и с ней можно манипулировать мышью*/            
    display: block;
    pointer-events: auto;    
}
0
26.11.2018, 06:06
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
26.11.2018, 06:06

При нажатии на кнопку вывести окно
Здравствуйте, подскажите функцию что бы при нажатии на кнопку выводилось новое окно, в котором...

Как вывести диалоговое окно при нажатии кнопки?
Как можно вывести дилоговое окно при нажатие кнопки : private void button1_Click(object sender,...

Как при нажатии одного радиобаттона показать одну картинку, а при нажатии другого другую
Как сделать так, чтобы при нажатие одного радиобаттона появлялась одна картинка, а при нажатие...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru