Уважаемые пользователи seo-vebmaster.ucoz.net. Вы найдете у нас на портале - различные скрипты сайтов, уникальные, бесплатные шаблоны, модули, хаки и релизы популярных CMS . С Уважением Администрация seo-vebmaster.ucoz.net

Скачать Модальное окно HTML + CSS без JavaScript бесплатно
После регистрации у вас появиться еще одна ссылка для бесплатного скачивания и пропадет рекламма!
21.12.2023, 19:16
Модальное окно HTML + CSS без JavaScript




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

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

Так окно в реальности выглядит при открытие:




Самое простое модальное окно на чистом CSS

Установка:

HTML

Код

<a class="osnova_okna" href="#asanodu_molving">Открыть</a>
<div class="osnovanye" id="asanodu_molving">
  <div class="kanoving">
  <h2>ZORNET.RU</h2><a class="udelopas" href="#">×</a>
  <!-- Содержимое модального окна -->
  <div class="nulsaudk_saelopas">
  <p>
Здесь идет описание или для ознакомления, вообщем то, что вы бы хотели видеть, и все появляется при клике на кнопку
  </p>
  </div>
  </div>
</div>


CSS

Код

/* Кнопка */
.osnova_okna {
  color: #ebebeb;
  cursor: pointer;
  line-height: 2.8rem;
  padding: 1.2rem 2.8rem;
  text-decoration: none;
  background-color: #285370;
  transition: all 0.3s ease-out;
}
.osnova_okna:hover {
  background-color: #095d95;
}

/* Затемнение фона */
.osnovanye {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.7);
  transition: opacity 500ms;
  visibility: hidden;
  height: 100%;
  opacity: 0;
}
.osnovanye:target {
  visibility: visible;
  opacity: 1;
}

/* Модаальное окно */
.kanoving {
  margin: 68px auto;
  padding: 1em;
  background: #e1e4e7;
  border-radius: 5px;
  width: 86%;
  position: relative;
  transition: all 5s easeout;
}
.kanoving h2 {
  margin: 1em 0;
  color: #333;
  font-family: 'Raleway', sans-serif;
}

/* Кнопка закрыть */
.kanoving .udelopas {
  position: absolute;
  top: 18px;
  right: 25px;
  transition: all 200ms;
  font-size: 25px;
  font-weight: bold;
  text-decoration: none;
  color: #282a2c;
}
.kanoving .udelopas:hover {
  color: #6781a1;
}
.kanoving .nulsaudk_saelopas {
  overflow: auto;
}
.nulsaudk_saelopas p{
  text-align: justify;
}
::-webkit-scrollbar {
  z-index: 30;
  width: 5px;
  height: 0;
  y-index: hidden;
}
::-webkit-scrollbar-track {
  background-color: #0a0a0a;
  border-radius: 0;
}
::-webkit-scrollbar-thumb {
  background-color: #35383e;
}
::-webkit-scrollbar-thumb:hover {
  background-color: transparent;
}


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

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

И здесь по дизайну вы можете посмотреть, все идет по стандарту, в светлом формате. Но н счет оттенка цвета, то все мгновенно можно решить в стилистике, что закреплена га основой.

Демонстрация

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


Всего комментариев: 0
avatar
Мини профиль
Для просмотра мини профиля,войдите на сайт как пользователь.
Мы в ВКонтакте
Популярные новости
Шаблон 7ol...
Шаблон для...
Уникальный...
Оригинал с...
Шаблон для...
Лучшие фай...
Последние ...
Мини-чат
Для добавления необходимо
войти или зарегистрироваться
Статистика
Счетчики сайта
Top.Mail.Ru

Анализ сайта seo-vebmaster.ucoz.net Яндекс.Метрика Catalog.ru.net - Каталог сайтов
Сейчас online
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Сегодня наш сайт посетили
Счетчик пользователей
Сегодня нас посетило
Счетчики сайта
  • Счетчик юзеров
  • Всего юзеров: 13
    За месяц: 0
    За неделю: 0
    За вчера: 0
    Сегодня: 0
  • Счетчик материалов
  • Всего файлов: 1407
    Всего новостей: 0
    Всего статей: 0
    Темы форума: 1533
    Категории
    Шаблоны Ucoz бесплатно [24]
    Скачать бесплатно Шаблоны Ucoz бесплатно
    Скрипты Ucoz бесплатно [94]
    Скачать Скрипты Ucoz бесплатно
    Шапки для Ucoz [0]
    Скачать Шапки Ucoz бесплатно
    Иконки для Ucoz [5]
    Иконки Ucoz бесплатно
    Кнопки Ucoz бесплатно [3]
    Тут найдете и скачаете Кнопки Ucoz бесплатно
    Уроки Ucoz бесплатно [5]
    Тут найдете и скачаете Уроки Ucoz бесплатно
    Для Форумов Ucoz бесплатно [0]
    Тут найдете и скачаете Для Форумов Ucoz бесплатно
    Разное Ucoz бесплатно [38]
    Тут найдете и скачаете Разное Ucoz бесплатно
    Партнеры сайта
    Стать партнером Стать партнером Стать партнером Стать партнером
    Интересные файлы
    NVU
    • NVU
    • Просмотров: 188
    • Дата: 12.01.2016
    Блок новос...
    Шрифт - Pl...
    Фоны для ф...
    Emurasoft ...
    Светлые кн...
    Кисть для ...