Однажды для сайта понадобилось разместить информацию с различными маршрутами на картах, и что бы не плодить страницы в которых разные тока маршруты и заголовки пришлось прибегнуть к такому инструменту «Всплывающее окно». Реализуется оно достаточно просто. Опять же таки это элемент фреимворка JQuery поэтому начинается все с подключения
1 | <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> |
Данный метод для того кому лень качать и заливать на сайт. У кого же он есть можно заменить адрес атрибута src
Далее вставляем в нужное нам место данный код и переименовываем ссылку и вместо слова текст добавляем информацию которая будет находится в окне
1 2 3 4 5 6 7 | <a href="#modal" class="button openModal">Ссылка</a> <div id="modal" class="modal"> <div> <div class="text"> текст </div> <a href="#close" title="Закрыть">Закрыть</a> |
После того как вы все выполнили останется к CSS коду добавить оформление окна. Кто знаком с Css может отредактировать как ему надо, все подписано. Единственное что мне понадобилось отредактировать это размер окна он подписан комментариями «СОДЕРЖАНИЕ», где я параметры width (ширина) и height (высота) поменял на свое.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 | /* Контейнер */ .modal { /* Слой перекрытия */ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 10000; /* Трансформации прозрачности при открытии */ -webkit-transition: opacity 500ms ease-in; -moz-transition: opacity 500ms ease-in; transition: opacity 500ms ease-in; /* Скрываем изначально */ opacity: 0; pointer-events: none; } /* Показываем модальное окно */ .modal:target { opacity: 1; pointer-events: auto; } /* Содержание */ .modal > div { width: 950px; height:550px; background: #ffffff; position: relative; margin: 10% auto; /* По умолчанию минимизируем анимацию */ -webkit-animation: minimise 500ms linear; /* Придаем хороший вид */ padding: 30px; -moz-border-radius: 7px; border-radius: 7px; -webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9); -moz-box-shadow: 0 3px 20px rgba(0,0,0,0.9); box-shadow: 0 3px 20px rgba(0,0,0,0.9); text-shadow: 0 1px 0 #fff; } /* Изменяем анимацию при открытии модального окна*/ .modal:target > div { -webkit-animation-name: bounce; } .modal h2 { font-size: 36px; padding: 0 0 20px; } @-webkit-keyframes bounce { 0% { -webkit-transform: scale3d(0.1,0.1,1); -webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9); } 55% { -webkit-transform: scale3d(1.08,1.08,1); -webkit-box-shadow: 0 10px 20px rgba(0,0,0,0); } 75% { -webkit-transform: scale3d(0.95,0.95,1); -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.9); } 100% { -webkit-transform: scale3d(1,1,1); -webkit-box-shadow: 0 3px 20px rgba(0,0,0,0.9); } } @-webkit-keyframes minimise { 0% { -webkit-transform: scale3d(1,1,1); } 100% { -webkit-transform: scale3d(0.1,0.1,1); } } /* Ссылка на кнопку Закрыть */ .modal a[href="#close"] { position: absolute; right: 0; top: 0; color: transparent; } /* Сбрасываем изменения */ .modal a[href="#close"]:focus { outline: none; } /* Создаем кнопку Закрыть */ .modal a[href="#close"]:after { content: 'X'; display: block; /* Позиционируем */ position: absolute; right: -10px; top: -10px; width: 20px; padding: 1px 1px 1px 2px; /* Стили */ text-decoration: none; text-shadow: none; text-align: center; font-weight: bold; background: #000; color: #ffffff; border: 3px solid #ffffff; -moz-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); box-shadow: 0 1px 3px rgba(0,0,0,0.5); } .modal a[href="#close"]:focus:after, .modal a[href="#close"]:hover:after { -webkit-transform: scale(1.1,1.1); -moz-transform: scale(1.1,1.1); } .modal a[href="#close"]:focus:after { outline: 0px solid #000; } /* Открываем модальное окно */ a.openModal { } a.openModal:hover, a.openModal:focus { } .modal .modal_title { display: block; text-align: center; font-size: 22pt; } |
Будьте первым, кто оставит комментарий