Как сделать popup окно

@CyberIslam · Регистрация: 21.02.2013

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

Здравствуйте! Как сделать вот такое окно поверх страницы сайта?

@mrtoxas · 07.06.2017, 14:30

С чем возникли сложности?

@CyberIslam · 07.06.2017, 14:44 **[ТС]**

mrtoxas, сложности в том, что это все делается в html, не используя CMS. Надо сделать полупрозрачный фон, на него поставить запись о семинаре, ввести имя, телефон, и отправить все на почту. нажимая записаться. И в то же время, все это должно плавать по всей странице вместе с меню

@mrtoxas · 07.06.2017, 16:32

HTML5

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <style>
    .popup {
      width: 300px;
      height: 400px;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: rgba(0, 0, 0, .5);
      border-radius: 10px;
      padding: 20px;
      box-sizing: border-box;
    }
  </style>
</head>
 
<body>
  <div class="popup">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis fugiat inventore illo. Odit reiciendis amet officiis, nam laboriosam, a deserunt magni distinctio ad, corporis, sint incidunt nostrum nulla esse eos.
  </div>
</body>
 
</html>

С отправкой на почту - вам в ветку PHP.

@CyberIslam · 07.06.2017, 17:56 **[ТС]**

Благодарю Вас за код, mrtoxas.
Я вот указал там прозрачность - opacity:0.5/ Тогда текст тоже становится прозрачным. нельзя ли сделать так, чтобы текст оставался на месте, только фон - прозрачный?

@mrtoxas · 07.06.2017, 18:00

CyberIslam, нельзя. Делайте прозрачность фона так, как я показал в 15й строке. Или заводите для фона отдельный блок и тогда задавайте ему opacity.

@CyberIslam · 07.06.2017, 22:48 **[ТС]**

при нажатии на "записаться" можно реализовать такое же мелкое окошко подтверждения успеха операции?

@mrtoxas · 07.06.2017, 23:27

Окошко в окошке?

Все можно.

@CyberIslam 21 / 14 / 5 Регистрация: 21.02.2013 Сообщений: 696
		1
	Как сделать popup окно 07.06.2017, 14:12. Показов 1928. Ответов 7 Метки нет (Все метки) Здравствуйте! Как сделать вот такое окно поверх страницы сайта? Миниатюры 0

@mrtoxas 3824 / 2674 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	07.06.2017, 14:30	2
	С чем возникли сложности? 0

@CyberIslam 21 / 14 / 5 Регистрация: 21.02.2013 Сообщений: 696
	07.06.2017, 14:44 [ТС]	3
	mrtoxas, сложности в том, что это все делается в html, не используя CMS. Надо сделать полупрозрачный фон, на него поставить запись о семинаре, ввести имя, телефон, и отправить все на почту. нажимая записаться. И в то же время, все это должно плавать по всей странице вместе с меню 0

@CyberIslam 21 / 14 / 5 Регистрация: 21.02.2013 Сообщений: 696
	07.06.2017, 17:56 [ТС]	5
	Благодарю Вас за код, mrtoxas. Я вот указал там прозрачность - opacity:0.5/ Тогда текст тоже становится прозрачным. нельзя ли сделать так, чтобы текст оставался на месте, только фон - прозрачный? 0

@mrtoxas 3824 / 2674 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	07.06.2017, 18:00	6
	CyberIslam, нельзя. Делайте прозрачность фона так, как я показал в 15й строке. Или заводите для фона отдельный блок и тогда задавайте ему opacity. 0

@CyberIslam 21 / 14 / 5 Регистрация: 21.02.2013 Сообщений: 696
	07.06.2017, 22:48 [ТС]	7
	при нажатии на "записаться" можно реализовать такое же мелкое окошко подтверждения успеха операции? 0

@mrtoxas 3824 / 2674 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	07.06.2017, 23:27	8
	Окошко в окошке? Все можно. 0

Опции темы

Как сделать popup окно

Решение