ZorNet.Ru — сайт для вебмастера » HTML и CSS » Функциональное модальное окно на CSS3

Функциональное модальное окно на CSS3

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

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

Красивое модальное окна

Полностью установка прописано в текстовом формате, что нужно скачать.

Здесь, чтоб понять, как все работает, представлена основа, где и будет находится, то что решите прописать в окне.

Код
<div class="wrap">
  <a class="button" href="#openmodal"><span class="submit">Жми</span> сюда<span class="submit">!</span></a>
   
<div id="openmodal" class="modalbg">
  <div class="dialog">
  <a href="#close" title="Закрыть" class="close">X</a>
  <h2>Приветствую всех!</h2>
  <p>Вашему вниманию отличное окно на css</p>
  <p>При клике оно открывается, при нажатие на кричтик, вы его закрываете, все очкень просто.</p>
  <p class="fineprint">За основу взят урок "Модальные всплывающие окна с помощью CSS3 без Javascript" с блога <a href="http://zornet.ru/">ZorNet.Ru</a></p>
  <p class="fineprint">Нужно понимать, что не на всех браузерах будет работать корректно</p>
  </div>
</div>
</div>

Посмотреть как работает на странице демонстрация.

Источник: dbmast.ru
27 Ноября 2017 Загрузок: 1 Просмотров: 1579 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 0
avatar