Всплывающее окно при клике на ссылку

Всем привет. Сегодня я расскажу про третий вид всплывающих окон — это окно, которое появляется при клике на ссылку.

Содержание:
1) И снова codyhouse.co
2) Кроссбраузерность
3) Пример всплывающего окна при клике на ссылку в WordPress
4) Итоги

 И снова codyhouse.co

Данный вид всплывающего окна я нашёл на замечательном сайте codyhouse.co, а также использовал его в блоге. Если вы нажмёте на ссылку вверху «Подписаться», то увидите окно оформления подписки на новости и новые статьи. Данный вид всплывающего окна сделать очень просто, а самое главное оно поддерживается основными популярными браузерами. Такое свойство элементов (частей сайта или всего сайта целиком) называется кроссбраузерность.

Screen Shot 2014-09-02 at 02.30.15

Кроссбраузерность

Кроссбраузерность — свойство сайта отображаться и работать в всех основных популярных браузерах одинаково. Это очень важное свойство в наше время, так как пользователи могут заходить на сайт с Safari, Google Chrome, Mozilla Firefox, Opera или Internet Explorer. И это только список самых популярных браузеров. И все эти браузеры работают и отображают сайты по разному, но ваша задача этого избежать.

2

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

 

Пример всплывающего окна при клике на ссылку в WordPress

И так, рассмотрим пример такого окна.

Для начала нужно скачать архив с сайта codyhouse.co и распаковать его на своём компьютере.

3

Screen Shot 2014-09-02 at 02.30.55

Теперь скопируем на сервер в корневую папку вашего сайта папку из архива с именем «js», в которой находятся два файла main.js и modernizr.js

Screen Shot 2014-09-02 at 02.25.58

Screen Shot 2014-09-02 at 02.26.49

Screen Shot 2014-09-02 at 02.27.19

Затем открываем файл стилей сайта style.css и вставляем следующий код
 .cd-popup {
 position: fixed;
 left: 0;
 top: 0;
 height: 100%;
 width: 100%;
 background-color: rgba(94, 110, 141, 0.9);
 opacity: 0;
 visibility: hidden;
 -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
 -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
 transition: opacity 0.3s 0s, visibility 0s 0.3s;
 }
 .cd-popup.is-visible {
 opacity: 1;
 visibility: visible;
 -webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
 -moz-transition: opacity 0.3s 0s, visibility 0s 0s;
 transition: opacity 0.3s 0s, visibility 0s 0s;
 }
 .cd-popup-container {
 position: relative;
 width: 90%;
 max-width: 400px;
 margin: 4em auto;
 background: #FFF;
 border-radius: .25em .25em .4em .4em;
 text-align: center;
 box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
 -webkit-transform: translateY(-40px);
 -moz-transform: translateY(-40px);
 -ms-transform: translateY(-40px);
 -o-transform: translateY(-40px);
 transform: translateY(-40px);
 -webkit-backface-visibility: hidden;
 -webkit-transition-property: -webkit-transform;
 -moz-transition-property: -moz-transform;
 transition-property: transform;
 -webkit-transition-duration: 0.3s;
 -moz-transition-duration: 0.3s;
 transition-duration: 0.3s;
 }
 .cd-popup-container p {
 padding: 3em 1em;
 }
 .cd-popup-container .cd-buttons:after {
 content: "";
 display: table;
 clear: both;
 }
 .cd-popup-container .cd-buttons li {
 float: left;
 width: 50%;
 }
 .cd-popup-container .cd-buttons a {
 display: block;
 height: 60px;
 line-height: 60px;
 text-transform: uppercase;
 color: #FFF;
 -webkit-transition: background-color 0.2s;
 -moz-transition: background-color 0.2s;
 transition: background-color 0.2s;
 }
 .cd-popup-container .cd-buttons li:first-child a {
 background: #fc7169;
 border-radius: 0 0 0 .25em;
 }
 .no-touch .cd-popup-container .cd-buttons li:first-child a:hover {
 background-color: #fc8982;
 }
 .cd-popup-container .cd-buttons li:last-child a {
 background: #b6bece;
 border-radius: 0 0 .25em 0;
 }
 .no-touch .cd-popup-container .cd-buttons li:last-child a:hover {
 background-color: #c5ccd8;
 }
 .cd-popup-container .cd-popup-close {
 position: absolute;
 top: 8px;
 right: 8px;
 width: 30px;
 height: 30px;
 }
 .cd-popup-container .cd-popup-close::before, .cd-popup-container .cd-popup-close::after {
 content: '';
 position: absolute;
 top: 12px;
 width: 14px;
 height: 3px;
 background-color: #8f9cb5;
 }
 .cd-popup-container .cd-popup-close::before {
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
 left: 8px;
 }
 .cd-popup-container .cd-popup-close::after {
 -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 -o-transform: rotate(-45deg);
 transform: rotate(-45deg);
 right: 8px;
 }
 .is-visible .cd-popup-container {
 -webkit-transform: translateY(0);
 -moz-transform: translateY(0);
 -ms-transform: translateY(0);
 -o-transform: translateY(0);
 transform: translateY(0);
 }
 @media only screen and (min-width: 1170px) {
 .cd-popup-container {
 margin: 8em auto;
 }
 }

Осталось вставить html код в наш сайт и добавить ссылку. Для этого открываем файл подвала сайта на WordPress footer.php и почти в самом конце перед тегом </body> вставляем код для окна и подключаем файлы из папки «js»

<div class="cd-popup" role="alert">
 <div class="cd-popup-container">
 <p>Are you sure you want to delete this element?</p>
 <ul class="cd-buttons">
 <li><a href="#0">Yes</a></li>
 <li><a href="#0">No</a></li>
 </ul>
 <a href="#0" class="cd-popup-close img-replace">Close</a>
 </div> <!-- cd-popup-container -->
 </div> <!-- cd-popup -->
 <script src="http://mysite.ru/js/main.js"></script>

Заходим в консоль управления сайта, переходим в раздел «Внешний вид» и «Меню». Там вы создаём ссылку для меню, например «Всплывающее окно», а вместо адреса ставим знак решётки (#). Далее нажимаем «Добавить в меню».

4

В структуре меню раскрываем нашу ссылку и добавляем в поле «Классы CSS» стиль «cd-popup-trigger».

5

Если у вас нет такого раздела, то включаем его.Для этого в верхнем правом углу окна консоли нажимаем на вкладку «Настройки экрана»

6

и ставим галочку возле свойства меню «Классы CSS«, а после этого добавляем стиль «cd-popup-trigger» для ссылки «Всплывающее окно».

7

Не забываем сохранить меню.

8

Теперь переходим на наш сайт и проверяем работоспособность всплывающего окна.

Screen Shot 2014-09-02 at 03.09.31

 

Итоги

Таким образом мы разобрали с вами очередной вид всплывающего окна при нажатии на ссылку. С другими видами вы можете ознакомиться по следующим ссылкам:

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

На этом всё. Подписывайтесь на новости, рассказывайте друзьям в социальных сетях и читайте блог.

end

  • Спасибо за статью, сделал мобильное fullscreen меню на сайте, Да благословит вас Господь!

  • Спасибо.