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

MODAL (всплывающее окно)

08.01.2018, 16:00. Просмотров 121. Ответов 0
Метки нет (Все метки)

Все доброго времени суток!
Прошу написать модал(всплывающее окно) сам не осилю так как занимаюсь разработкой на C# (STM32 AVR) Что мог то написал, кто может допишите плиз. и как сделать все по центру экрана ?



PHPHTML
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html>
 <head>
  <title>Monitoring</title>
  <body bgcolor="#F0F8FF">
  <style>
   li 
  {
    display: inline-block; /* Строчно-блочные элементы */
    background: #CA181A; /* Цвет фона */
    margin-right: 3px; /* Расстояние между пунктами меню */
    -webkit-transform: skewX(-30deg); /* Для Safari и Chrome */
    -moz-transform: skewX(-30deg); /* Для Firefox */
    -o-transform: skewX(-30deg); /* Для Opera */
    -ms-transform: skewX(-30deg); /* Для IE */
    transform: skewX(-30deg); /* CSS3 */
   }
   a 
   {
    color: #fff; /* Цвет ссылок */
    display: block; /* Блочный элемент */
    padding: 5px 15px; /* Поля вокруг текста */
    text-decoration: none; /* Убираем подчёркивание */
    -webkit-transform: skewX(30deg); /* Для Safari и Chrome */
    -moz-transform: skewX(30deg); /* Для Firefox */
    -o-transform: skewX(30deg); /* Для Opera */
    -ms-transform: skewX(30deg); /* Для IE */
    transform: skewX(30deg); /* CSS3 */
   }
   li:hover 
   {
    background: #333; /* Цвет фона при наведении курсора мыши */
   }
   
   .layer1 
   {
    position:fixed;
    top: 100px;
    left: 100px;
    bottom: 105px;
    width: 250px;
   }
   
      .layer2 
   {
    position:fixed;
    top: 100px;
    left: 350px;
    bottom: 105px;
    width: 400px;
   }
   
      .layer3 
   {
    position:fixed;
    top: 600px;
    left: 600px;
    bottom: 105px;
    width: 200px;
   }
   
   .layer4 
   {
    position:fixed;
    top: 200px;
    left: 100px;
    bottom: 105px;
    width: 280px;
   }
   
  </style>
 </head>
 <body>
 
 
 
  <ul>
    <li><a title= "В этом диалоговом меню производится выбор подключемого 
вами инвертора к общей системе мониторинга компании QWER" href="invertor.html">Выбор инвертора</a></li>
    <li><a title= "В этом диалоговом меню производится выбор подключемого 
вами гелиоконтроллера к общей системе мониторинга компании QWER"href="gelio.html">Выбор Гелиоконтроллера</a></li>
    <li><a title= "В этом диалоговом меню производится выбор доступной сети WI-FI 
для подключения к общей системе мониторинга компании QWER" href="setings.html">Настройка WI-FI</a></li>
    <li><a href="activation.html">Активация</a></li>
    <li><a href="about.html">О ПО</a></li>
  </ul>
  
   <form action="invertor.html" method="GET">
   
   <div class="layer1"> 
<p>Выберите модель инвертора</p>
   <p title="Модель инвертора указана на боковой 
крышке самого устройства."><select name="invertor_AKSG">
   <option selected value="AKSG_5_DM">AKSG-5K-DM</option>
   <option value="AKSG_10_DM">AKSG-10K-DM</option>
   <option value="AKSG_15_DM">AKSG-15K-DM</option>
   <option value="AKSG_20_DM">AKSG-20K-DM</option>
   <option value="AKSG_30_DM">AKSG-30K-DM</option>
   <option value="AKSG_50_DM">AKSG-50K-DM</option>
   <option value="AKSG_60_TM">AKSG-60K-TM</option>
   </select>
   </div>  
   
   <div class="layer2"> 
<p>Выберите интервал обновления данных (минуты)</p>
   <p title="Данный параметр это периодичность отправки 
информации от инвертора к серверу мониторинга QWER."><select name="Time">
   <option value="1">1 минута</option>
   <option value="5">5 минут</option>
   <option value="10">10 минут</option>
   <option value="20">20 минут</option>
   <option selected value="30">30 минут</option>
   <option value="60">1 час</option>
   </select>
   </div> 
   
   <div class="layer4"> 
   <p>Введите серийный номер инвертора</p>
   <p title="Серийный номер инвертора указана на боковой 
крышке самого устройства, это 21 цифра под штрихкодом"><input name="SN" pattern="[0-9]{21,21}" required placeholder="21 цифра под штрихкодом"></p>
   </div> 
   
   
   
   <div class="layer3"> 
<button  title="После нажатия данной кнопки все выбраные 
вами параметры будут сохранены, точка доступа 
QWER_MONITORING станет недоступной в целях безопасности.
Для внесения изминений добавте на устройстве (телефон или пк) 
SSID- ALM и password 12345678" type="submit">Подтвердить Все</button></p>
   </div>
   
   
   Modal после нажатия button с фразой ВСЕ Записано и кнопка закрывающая МOdal
   
 
  
  
 </body>
</html>
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
08.01.2018, 16:00
Ответы с готовыми решениями:

Всплывающее окно
Доброго времени суток! Как сделать всплывающее окно например как у этого сайта:...

Всплывающее окно
Добрый день! Столкнулся с такой проблемой, что никак не могу сделать или возможно не могу понять,...

Всплывающее окно
как создать простое всплывающее окно с информацией типа :&quot;Ваша заявка отправлена!&quot; в html/css?

Всплывающее окно
Как сделать вот такое всплывающее окошко? Это с JS или какаянить развернутая версия тега &lt;title&gt;

Всплывающее окно
У меня есть окно, которая появляется поверх активной страницы. Как мне можно всплывающее окно...

0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
08.01.2018, 16:00

Всплывающее окно
Всем привет. Подскажите пожалуйста. Есть меню, задается оно в админной части сайта т.е получается...

всплывающее окно
Добрый день. Подскажите пожалуйста ресурсы, на которых можно было бы найти следующее решение:...

Всплывающее окно...
Здравствуйте! Хотелось бы узнать можно на html сделать следующее: При нажатии на кнопку всплывает...


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

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

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