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

@Dmitry54321 · Регистрация: 23.09.2016

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

Есть вот такое модальное окно, написано полностью на CSS. В нем есть поля для заполнения и кнопка submit.
Есть два вопроса:
1. Как сделать так, чтобы при отправке данных с формы и обновлении страницы модальное окно не открывалось заново?
2. Как сделать, чтобы после отправки вместо прошлой формы было что-то вроде: "Спасибо, что оставили заявку!" и также кнопка "Закрыть"?
HTML:

HTML5
1
2
3
4
5
6
7
8
9
<div class="popup">
        <form action="" method="post" id="form-2">
            <input type="text" class="form-name name" name="name" placeholder="имя">
            <input type="text" class="form-phone tell" name="phone" placeholder="телефон">
            <input type="text" class="form-email email" name="email" placeholder="эл.почта">
            <input class="btn btn-default close-popup" type="submit" name="submit" value="Отправить заявку">
        </form>
    <a class="close" title="Закрыть" href="#close"></a>
    </div>

CSS:

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
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
.popup {
    top: -100%;
    right: 0;
    left: 50%;
    font-size: 14px;
    z-index: 20;
    margin: 0;
    height: 290px;
    width: 250px;
    text-align:center;
    font-family: "Tahoma";
    font-size: 14px;
/* фиксированное позиционирование, окно стабильно при прокрутке */
    position: fixed;
    padding: 15px;
    border: 3px solid #fbab18;
    background: #fefefe;
/* скругление углов */
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    font: 14px/18px 'Tahoma', Arial, sans-serif;
/* внешняя тень */
    -webkit-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -moz-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -ms-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -webkit-transform: translate(-50%, -500%);
    -ms-transform: translate(-50%, -500%);
    -o-transform: translate(-50%, -500%);
    transform: translate(-50%, -500%);
    -webkit-transition: -webkit-transform 0.6s ease-out;
    -moz-transition: -moz-transform 0.6s ease-out;
    -o-transition: -o-transform 0.6s ease-out;
    transition: transform 0.6s ease-out;
}
/* активируем модальный блок */
.overlay:target+.popup {
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    top: 30%;
}
/* формируем кнопку закрытия */
.close {
    top: -10px;
    right: -10px;
    width: 20px;
    height: 20px;
    position: absolute;
    padding: 0;
    border: 2px solid #ccc;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
    background-color: rgba(61, 61, 61, 0.8);
    -webkit-box-shadow: 0px 0px 10px #000;
    -moz-box-shadow: 0px 0px 10px #000;
    box-shadow: 0px 0px 10px #000;
    text-align: center;
    text-decoration: none;
    font: 13px/20px 'Tahoma', Arial, sans-serif;
    font-weight: bold;
    -webkit-transition: all ease .8s;
    -moz-transition: all ease .8s;
    -ms-transition: all ease .8s;
    -o-transition: all ease .8s;
    transition: all ease .8s;
}
.close:before {
    color: rgba(255, 255, 255, 0.9);
    content: "X";
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
    font-size: 12px;
}
.close:hover {
    background-color: red;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);    
}

Добавлено через 25 минут
Кнопка отправки из Bootstrap

@kalder · 25.10.2016, 20:50

Jquery и Ajax в помощь

@Dmitry54321 · 25.10.2016, 21:21 **[ТС]**

Для чего мне они? Модальное окно уже сделано, а некорректно работает кнопка отправки. Обоснуй конкретней.

@Balanaar · 26.10.2016, 09:21

Dmitry54321, кнопка работает корректно. Просто не так, как ожидаете вы.

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

... при отправке данных с формы и обновлении страницы модальное окно не открывалось заново?

Ммм... отключите автоматическое открытие всплывающего окна при загрузке страницы.

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

... после отправки вместо прошлой формы было что-то вроде: "Спасибо, что оставили заявку!" и также кнопка "Закрыть"?

В атрибут action формы задайте адрес вашей страницы с успешной отправкой формы. Если хотите без перезагрузки страницы - то

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

Ajax в помощь

@Dmitry54321 · 26.10.2016, 10:05 **[ТС]**

отключите автоматическое открытие всплывающего окна при загрузке страницы

А как это сделать? Можете показать на примере моего кода?

@Balanaar · 26.10.2016, 10:13

Dmitry54321, могу, если бы он у меня был. Как именно у вас вызывается модальное окно?

@Dmitry54321 · 26.10.2016, 17:05 **[ТС]**

У меня абсолютно нет никакого скрипта для вызова. Все, что используется я дал выше. Вызывается через CSS, видимо

Добавлено через 3 минуты
Триггер в кнопке("Оформить заявку").

HTML5
1
<a href="#win1" class="feedback">Оформить заявку</a>

@Balanaar · 26.10.2016, 17:07

Ну вот в этом-то и ваша проблема. Напишите скрипт вызова этого окна и вызывайте по мере необходимости

@Dmitry54321 · 26.10.2016, 17:07 **[ТС]**

Вот сам код вызова в HTML:

HTML5
1
2
3
4
5
6
7
8
9
10
<a href="#x" class="overlay" id="win1"></a>
    <div class="popup">
        <form action="" method="post" id="form-2">
            <input type="text" class="form-name name" name="name" placeholder="имя" required>
            <input type="text" class="form-phone tell" name="phone" placeholder="телефон" required>
            <input type="text" class="form-email email" name="email" placeholder="эл.почта" required>
            <input class="btn btn-default" type="submit" name="submit" value="Отправить заявку">
        </form>
    <a class="close" title="Закрыть" href="#close"></a>
    </div>

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@kalder 8 / 6 / 2 Регистрация: 25.12.2011 Сообщений: 116
	25.10.2016, 20:50
	Jquery и Ajax в помощь 0

@Dmitry54321 0 / 0 / 0 Регистрация: 23.09.2016 Сообщений: 30
	25.10.2016, 21:21 [ТС]
	Для чего мне они? Модальное окно уже сделано, а некорректно работает кнопка отправки. Обоснуй конкретней. 0

@Balanaar 2463 / 1769 / 625 Регистрация: 11.07.2016 Сообщений: 4,067
	26.10.2016, 10:13
	Dmitry54321, могу, если бы он у меня был. Как именно у вас вызывается модальное окно? 0

@Balanaar 2463 / 1769 / 625 Регистрация: 11.07.2016 Сообщений: 4,067
	26.10.2016, 17:07
	Ну вот в этом-то и ваша проблема. Напишите скрипт вызова этого окна и вызывайте по мере необходимости 0

Опции темы