Скачать для фотошопа и для создания сайта Пятница, 20.09.2024, 01:04
Приветствую Вас Гость | RSS
Меню сайта

Категории раздела
Шаблоны для Ucoz
Шапки для Ucoz
Скрипты для Ucoz
Иконки для Ucoz
Кнопки для Ucoz
Уроки для Ucoz
Статьи для Ucoz
Прочее для Ucoz

Популярное

Мини-чат

Наш опрос
Оцените мой сайт
1. Отлично
2. Хорошо
3. Неплохо
4. Плохо
5. Ужасно
Всего ответов: 7

Статистика

Онлайн всего: 3
Гостей: 3
Пользователей: 0


Модальное окно на адаптивном CSS + HTML
После регистрации у вас появиться еще одна ссылка для бесплатного скачивания и пропадет рекламма!
19.10.2020, 12:35
Модальное окно на адаптивном CSS + HTML




Здесь представлен материал по созданию адаптивного всплывающего окна с затемнением по сторонам от основы с помощью CSS, но без применения JavaScript. Вероятно многие замечали, что часто бывает нужно показать, а точнее вывести нужную информацию пользователю, которая пригодится при выполнении различных функций на сайте. Что нужно выставлять как можно отдельно, и здесь это предложение отлично впишется в окне. Так как информационный поток, который представлен с появлением в окне будет максимально легко доходить до гостей и посетителей интернет ресурса.

Иногда бывает одно, но, это безусловно использование JavaScript, которая также задействовано для вывода обычных окон, то здесь может сработать различные приложение, что реально станет блокировать браузер. И здесь вашему вниманию представлено отлично выстроенное всплывающее окно с затемнением, где аналогично задействовали только HTML и CSS. Насчет JavaScript, то в этом окне оно не предусмотрено, так как полностью функционал работает на представленной стилистике CSS.

Как создать простое модальное окно на CSS



Плюс в том, что всплывающее окно корректно смотрится на любой ширине экрана, как на большом мониторе, так на мобильных гаджет. Это для того, кто выставляет в сеть мобильный материал, то модальное окно вам пригодится для вывода важной информации, где не будет искажать значение, и все корректно и читабельно выводить.

Установочный процесс:

HTML

Код
Код
<div class="ganduneka_okno">
  <div style="text-align: center;">
  <a href="#emergeeka_oknol">Открыть модальное окно</a>
  </div>
  <div id="emergeeka_oknol" class="emerge">
  <div class="vsplevsu_anemagen">
  <div class="emergena_konsuksua">
  <div class="kamages_designes">
  <h3 class="emergenua">ZORNET.RU</h3>
  <a href="#overcas" title="overcas" class="overcas">×</a>
  </div>
  <p class="opisaniye_okoshke">
  Здесь как раз идет описание или операторы, которые будут отображать функций для сайтов.
  </div>
  </div>
  </div>
  </div>
  </div>


CSS

Код
Код
.emerge {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  /* цвет фона */
  z-index: 1050;
  opacity: 0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
  }

  /* при отображении модального окно */
  .emerge:target {
  opacity: 1;
  pointer-events: auto;
  overflow-y: auto;
  }

  /* ширина модального окна и его отступы от экрана */
  .vsplevsu_anemagen {
  position: relative;
  width: auto;
  margin: 10px;
  }

  @media (min-width: 576px) {
  .vsplevsu_anemagen {
  max-width: 500px;
  margin: 30px auto;
  }
  }

  /* свойства для блока, содержащего контент модального окна */
  .emergena_konsuksua {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  background-color: #f1eded;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 5px;
  outline: 0;
  }

  @media (min-width: 768px) {
  .emergena_konsuksua {
  -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  }
  }

  /* свойства для заголовка модального окна */
  .kamages_designes {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 14px;
  border-bottom: 1px solid #a4b2b9;
  }

  .emergenua {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1.5;
  font-size: 1.25rem;
  font-weight: 500;
  }

  /* свойства для кнопки "Закрыть" */
  .overcas {
  float: right;
  font-family: sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: #151515;
  text-shadow: 0 1px 0 #fbfafa;
  opacity: .5;
  text-decoration: none;
  }

  /* свойства для кнопки "Закрыть" */
.overcas:focus, .overcas:hover {
  color: #1f1d1d;
  text-decoration: none;
  cursor: pointer;
  opacity: .80;
  text-shadow: 0 1px 0 #e0e0e0;
}

  /* свойства для блока, содержащего основное содержимое окна */
  .opisaniye_okoshke {
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 14px;
  overflow: auto;
}


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

Демонстрация
Категория: Скачать Скрипты для Ucoz | Добавил: Marco
Просмотров: 112 | Загрузок: 0 | Рейтинг: 0.0/0


Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Вход на сайт

Поиск

Популярное
SLS-Склад Лайт 
Feedmaster 1.7.4.2 бесплатно. 
Atlantis Word Processor 1.6.2 Beta 
Mozilla Sunbird 0.9 RU 
Фото на документы Экспресс 1.51 Rus 

На форуме
Файлообменник. З...
Автор: roterb
Форум: Куплю/Продам
Дата: 19.07.2024
Ответов: 0
Куплю, обмен шве...
Автор: roterb
Форум: Куплю/Продам
Дата: 27.06.2024
Ответов: 0
Файлообменник Sh...
Автор: Marco
Форум: Заработок на Файлообменниках
Дата: 27.06.2024
Ответов: 1
Заработок на фай...
Автор: Marco
Форум: Заработок на Файлообменниках
Дата: 27.06.2024
Ответов: 1
Файлообменник Le...
Автор: Marco
Форум: Заработок на Файлообменниках
Дата: 27.06.2024
Ответов: 1

Популярное

Партнеры сайта
Стать партнером Стать партнером Стать партнером Стать партнером

Copyright MyCorp © 2024