Модальное окно

@sergun1999 · Регистрация: 09.10.2017

Студворк — интернет-сервис помощи студентам

Здравствуйте!
Есть код обработчик формы ( php ), нужно чтобы после обработки человеку отображалось модальное окно в текущей странице.
Есть наработка, но модальное окно не открывается.
Подскажите, пожалуйста, в чем проблема ?

Сама форма:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<form method="post" action="">
 
<div id="sfera" align="center">
<font color="white" size="3"><b><center><u>Заголовок 1</u></center><b>
   <p><font color="white" size="2"><input type="checkbox" name="a1" value="1">Выбор 1</p>
   <p><input type="checkbox" name="a2" value="1">Выбор 2</p></font><br>
</div>
<div id="tip" align="center">
<font color="white" size="3"><b><center><u>Заголовок 2</u></center><b></font>
   <p><font color="white" size="2""><input type="checkbox" name="b1" value="1">Выбор 1</p>
   <p><input type="checkbox" name="b2" value="1">Выбор 2</p></font><br>
</div>
<div id="forma" align="center">
<font color="white" size="3"><b><center><u>Заголовок 3</u></center><b></font>
   <p><font color="white" size="2""><input type="checkbox" name="c1" value="1">Выбор 1</p>
   <p><input type="checkbox" name="c2" value="1">Выбор 2</p></font><br><br>
      <input type="submit" name="ок" value="Подобрать" />
</div>
</form>

Обработка:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
if ( $_POST['a1'] == '1' && $_POST['a2'] == '' && $_POST['b1'] == '' && $_POST['b2'] == '')   
{
echo '
<html>
<head>
<div id="openModal" class="modalDialog">
    <div>
        <a href="#close" title="Закрыть" class="close">X</a>
        <h2>Модальное окно</h2>
        <p>Содержимое.</p>
    </div>
</div>
</head>
</html>
';
}

Стили модального окна:

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
44
45
46
47
48
49
50
51
52
53
        .modalDialog {
        position: fixed;
        font-family: Arial, Helvetica, sans-serif;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,0.8);
        z-index: 99999;
        -webkit-transition: opacity 400ms ease-in;
        -moz-transition: opacity 400ms ease-in;
        transition: opacity 400ms ease-in;
        display: none;
        pointer-events: none;
    }
 
    .modalDialog:target {
        display: block;
        pointer-events: auto;
    }
 
    .modalDialog > div {
        width: 400px;
        position: relative;
        margin: 10% auto;
        padding: 5px 20px 13px 20px;
        border-radius: 10px;
        background: #fff;
        background: -moz-linear-gradient(#fff, #999);
        background: -webkit-linear-gradient(#fff, #999);
        background: -o-linear-gradient(#fff, #999);
    }
 
    .close {
        background: #606061;
        color: #FFFFFF;
        line-height: 25px;
        position: absolute;
        right: -12px;
        text-align: center;
        top: -10px;
        width: 24px;
        text-decoration: none;
        font-weight: bold;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
        -moz-box-shadow: 1px 1px 3px #000;
        -webkit-box-shadow: 1px 1px 3px #000;
        box-shadow: 1px 1px 3px #000;
    }
 
    .close:hover { background: #00d9ff; }

@Fedor92 · 30.07.2018, 13:21

ajax в помощь...

@sergun1999 · 30.07.2018, 13:23 **[ТС]**

Просто дело в том, что я можно сказать новичок в этом. Если можно пример ?

@Fedor92 · 30.07.2018, 13:46

modal.zip

На Вас всех кода не напасёшься...

@sergun1999 · 30.07.2018, 13:58 **[ТС]**

спасибо, конечно большое) но неужели нельзя обойтись html+css в этом случае ? У меня похоже нет связи между формой и вызовом этого блока

@Fedor92 · 30.07.2018, 14:21

Сообщение от sergun1999

о неужели нельзя обойтись html+css в этом случае ?

Неужели Вы думаете, что я стал бы Вам подсовывать свой код, если бы это можно было сделать средствами html и css?

Средства HTML и CSS - это средства для создания рыбы... А Вам нужно ловить событие...

@andyyy · 30.07.2018, 15:10

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
 
<head></head>
<style>
 
#modal {display: none;}
 
#modal:target {display: block;}
</style>
<body>
 
<a href='#modal'>ОТКРЫТЬ</a></label>
 
<div id='modal'><a href='#'>X</a>бла бла бала</div>
</body>
</html>

Добавлено через 45 секунд
если с php таргет не нужно просто
по условию открывайте окно

Добавлено через 4 минуты

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<html>
 
<head></head>
<style>
 
#modal {}
 
 
</style>
<body>
 
<form method='POST'><input type='submit' name='ok'></form>

PHP
1
2
3
4
<?PHP if(isset($_POST['ok'])) {
echo "<div id='modal'>бла бла бала</div>";
}
?>

HTML5
1
2
</body>
</html>

@sergun1999 · 30.07.2018, 15:48 **[ТС]**

я именно так и делаю, не получается

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .	делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	30.07.2018, 13:21
	ajax в помощь... 0

@sergun1999 0 / 0 / 0 Регистрация: 09.10.2017 Сообщений: 31
	30.07.2018, 13:23 [ТС]
	Просто дело в том, что я можно сказать новичок в этом. Если можно пример ? 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	30.07.2018, 13:46
	modal.zip На Вас всех кода не напасёшься... 0

@sergun1999 0 / 0 / 0 Регистрация: 09.10.2017 Сообщений: 31
	30.07.2018, 13:58 [ТС]
	спасибо, конечно большое) но неужели нельзя обойтись html+css в этом случае ? У меня похоже нет связи между формой и вызовом этого блока 0

@sergun1999 0 / 0 / 0 Регистрация: 09.10.2017 Сообщений: 31
	30.07.2018, 15:48 [ТС]
	я именно так и делаю, не получается 0

Модальное окно

Решение