» »

Функциональное модальное окно на 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.11.2017 Загрузок: 1 Просмотров: 217 Комментарий: (0)

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

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

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