Ранее я писала о разных вариантах реализации всплывающего окна для сайта. Видимо всплывающее окно — это очень актуальная тема, так как статья является самой популярной на моем сайте. Позже я наткнулась на очень хороший вариант всплывающего окна выполненном на чистом CSS. По ссылке указанной в Источнике вы найдете вариант всплывающего окна при загрузке страницы. Работает отлично, а главное без плагинов. Такой вариант я использую и на этом сайте. Это лучший вариант, который мне удалось найти в интернете. А потом я нашла еще один вариант
Немного модифицировав CSS, предлагаю Вам два варианта всплывающего окна на CSS при клике на ссылку. Конечно без Javascript события onclick обойтись не удалось, но все остальное это только CSS.
Выглядят окна так:
Устанавливаются эти окна очень просто. Для этого нужна соответствующая HTML разметка с применением нужных идентификаторов и CSS стили, соответствующие ей.
HTML
HTML состоит их двух частей:
— ссылки на окно;
— собственно самого окна
Важно! Менять разметку окон нельзя иначе оно не будет работать.
Само окно может быть размещено на странице где угодно.
Вариант 1
1 2 3 4 5 6 7 8 9 10 11 |
<!-- ССЫЛКА НА ОКНО --> <a href="javascript:void(0)" onclick="this.nextElementSibling.style.display='block';">Нажмите на ссылку</a> <!-- ОКНО --> <div id="parent_popup_click1" class="parent_popup_click"> <div class="popup_click"> <h2>Всплывающее окно на CSS</h2> <p><center>Тут может быть абсолютно любой html или даже скрипты</center> <a class="close" title="Закрыть" onclick="document.getElementById('parent_popup_click1').style.display='none';">X</a> </div> </div> |
Вариант 2
1 2 3 4 5 6 7 8 9 10 |
<!-- ССЫЛКА НА ОКНО --> <a href="javascript:void(0)" onclick="this.nextElementSibling.style.display='block';">Нажмите на ссылку</a> <!-- ОКНО --> <div id="parent_popup_click1" class="modal" onclick="document.getElementById('parent_popup_click1').style.display='none';"> <div class="modal-content"> <a class="closess" title="Закрыть" onclick="document.getElementById('parent_popup_click1').style.display='none';">×</a> <p>Some text in the Modal..</p> </div> </div> |
CSS
Но окно не будет работать без стилей CSS. Именно они отвечают за вид окна, за его появление и исчезание.
Стили для Варианта 1
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 |
/* Всплывающее окно */ .parent_popup, .parent_popup_click { background-color: rgba(0, 0, 0, 0.8); display: none; position: fixed; z-index: 99999; top: 0; right: 0; bottom: 0; left: 0; } .popup, .popup_click { background: #fff; max-width: 600px; width:70%; margin: 5% auto; padding: 5px 20px 13px 20px; border: 10px solid #ddd; position: relative; /*--CSS3 CSS3 Тени для Блока--*/ -webkit-box-shadow: 0px 0px 20px #000; -moz-box-shadow: 0px 0px 20px #000; box-shadow: 0px 0px 20px #000; /*--CSS3 Закругленные углы--*/ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .popup h2, .popup_click h2 { font:28px Monotype Corsiva, Arial; font-weight: bold; text-align: center; color: #008000; text-shadow: 0 1px 3px rgba(0,0,0,.3); } .popup h3, .popup_click h3 { font:24px Monotype Corsiva, Arial; color: #008000; text-align: left; text-shadow: 0 1px 3px rgba(0,0,0,.3); } /* кнопка закрытия */ .close { background-color: rgba(0, 0, 0, 0.8); border: 2px solid #ccc; height: 24px; line-height: 24px; position: absolute; right: -24px; cursor: pointer; text-align: center; text-decoration: none; color: rgba(255, 255, 255, 0.9); font-size: 14px; font-family: helvetica, arial; text-shadow: 0 -1px rgba(0, 0, 0, 0.9); top: -24px; width: 24px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .close:hover { background-color: rgba(255, 69, 0, 0.8); } |
Стили для Варианта 2
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 |
.modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 99999; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgba(0, 0, 0, 0.8); } /* Modal Content */ .modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 60%; } /* The Close Button */ .closess { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; } .closess:hover, .closess:focus { color: #000; text-decoration: none; cursor: pointer; } |
В этих стилях объединены вместе стили вплывающего окна при клике на ссылку и стили всплывающего окна при загрузке страницы.
Всплывающее окно при загрузке страницы
Если вы хотите, чтобы такое окно появлялось при загрузке страницы, тогда нужно удалить ссылку на окно
1 2 |
<!-- ССЫЛКА НА ОКНО --> <a href="javascript:void(0)" onclick="this.nextElementSibling.style.display='block';">Нажмите на ссылку</a> |
а перед закрывающемся тегом </body> добавить следующий javascript:
1 2 3 4 5 6 7 8 9 |
<script type="text/javascript"> $(function(){ if (document.cookie.indexOf('_visited=1') == -1) { var delay_popup = 5000; setTimeout("document.getElementById('parent_popup_click1').style.display='block'", delay_popup); document.cookie = '_visited=1; path=/'; } }); </script> |
Спасибо, помогли. А можно ли как-то сделать, чтобы ссылка, вызывающая окно, была не текст, а картинка? И можно ли в текст всплывающего окна вставлять картинки?
Конечно можно! Вместо «Нажмите на ссылку» вставляйте картинку.
приветствую, куда можно вставить эту часть?
×
Some text in the Modal..
Кроме как в код страницы
Виктор, еще можно в код шаблона.
Спасибо, то что надо! Странно, давно искал на css хорошее модальное окно, а нашёл только сейчас, хотя статья написана аж в 2015 году!
Чуть-чуть доработал, и теперь после заголовка в модальном окне есть скролл (для длинных по вертикали сообщений). Кому интересно, в коде html, после:
Ваш заголовок
добавить:
Ваш текст
Ну, и так далее.
Теперь заголовок остаётся как шапка на месте, а текст в скролле можно перемещать колесом мыши по вертикали.
ВЫ СПАСИЛИ МЕНЯ ПРОСТО! 4 НЕДЕЛИ ЭТУ ШТУКУ НЕ МОГ СДЕЛАТЬ!!!1
А еще вопрос: А как поступить если несколько ссылок, и нужно открывать окна с разным содержимым для каждой ссылки?
Darth! Все просто! Нужно в следующем коде окна поменять везде:
parent_popup_click1 на parent_popup_click2
а ссылки выходят одинаковыми что ли?
Виктор, в каком плане? И какие они должны быть?
В IE 11 не работает. Оба варианта. Ссылка есть, а по клику тишина. 🙁
Чет я не пойму. И как мне это вставить в пост WordPress?
Эти скрипты пропадают же.
Артур, что значит пропадают? У меня не пропадают и вставляются.
Помогите пожалуйста! Вставил весь необходимый код (вариант 1 при загрузке страницы), но окно ни на одной странице так и не появилось! Что я сделал не так?
OneMan, мне нужно видеть саму страницу.
Привет! Вставляю в форму скрипт обратной связи для сайта, при исполнении файла .php на странице показывается его содержимое а сам скрипт не исполняется. В чем проблема? Напишите плиз на мой e-mail
Николай, напишите мне на e-mail:
— какая форма обратной связи
— движок сайта
— не сбились ли теги окна (при изменении тегов скрипт не работает)
Здравствуйте. А не подскажите возможно ли, если да то как, вписать в окно почтовую форму Contact Form 7 вордпресс. Шорт кодом не получается.. Спасибо.
Александр, а в чем проблема? У меня прекрасно вставляется шоткод Contact Form 7. Что именно не получается.
Спасибо за ответ! Все поставил согласно описанному выше алгоритму- окно открывается, вставляю шорткод формы вместо:
Тут может быть абсолютно любой html или даже скрипты
отображается шорткод, шорткодом, а не почтовой формой для заполнения.. Прошу прощения за мою туповатось, но не могли бы Вы подробней описать как проделать сей ритуал.
Александр, скорее всего Вы вставляете шорткод в шаблон wordoress, а шорткоды работают только на страницах/записях. Для того, чтобы вставить шорткод в шаблон, его нужно вставлять с помощью php функции. А именно:
где вместо [Shortcode] вставляете свой шорткод.
Спасибо. Разобрался. Ранее вставлял в php. Как оказалось пришлось не много подкорректировать functions.php .
Да, все именно так))
А почему появляется\ при входе на страницу только 1 раз, а после закрытия не пашет! что то менять надо? или время какое то должно пройти?
Саша, какое именно окно Вы используете?
В статье два варианта:
— окно появляется при нажатии;
— окно появляется при загрузке страницы (при входе).
Спасибо за скрипт. Как можно сделать чтобы окно не закрывалось после перезагрузки страницы.
Александр, в данном варианте никак. Можно только сделать чтобы оно сразу загружалось с открытием страницы.
Отличная форма. Большое вам спасибо за такое подробное объяснение. Все быстро встроилось и работает. И, подскажите, как (хотя бы примерно) сделать, чтобы окно закрывалось не только по клику на крестик, но и по клику на пространство вне формы (которое стилями затемнено).
Артем, нужно добавить событие
в самый первый div окна с классом parent_popup_click
получится:
Спасибо!
у меня, в таком случае, окно закрывается при нажатии на любую часть экрана (даже при нажатии на ссылку или управляемый скрипт в самом окне), подскажите, пожалуйста, как сделать, чтобы окно закрывалось именно при на нажатии на затененную часть, т.е. «мимо» окна?
Антон, похоже что при данной структуре окна никак.
Добрый день!
Попробывал)))
Но не понял — написано вставиться в любое место страницы, главное не менять ничего.
Вставил и что вижу — просто вижу на странице окно, не всплывающее по клику, а постоянно на странице, нажимаем убрать окно — убирается. Нажимаем на клик опять просто появляеться на странице. И все это там где именно вставил)))
То ли Вы описали и я не понял. То ли описание не верное.
Вообщем не получилось
Сергей! Вы вставили стили CSS?
Добрый день!
Конечно, с этой страницы.
Окно то есть, только оно на странице постоянно и не всплывет!
При нажатии Х — закрывается.
Вы знаете разобрался, когда копировал из CSS, не все скопировал. Извините моя ошибка!!!
Можно такой вопрос — как вызвать это окно из скрипта PHP, скрипт PHP у меня в той же странице.
Это специальное окно на CSS. Что касается PHP — это слвсовсем другая история. Надо как минимум знать код скрипта. И это точно вопрос не к этой статье.
Спасибо!Помогите еще в одном вопросе.Нужно чтобы при открытии страницы всплывающее окно появлялось с задержкой.
Подскажите, как сделать, чтобы окно появлялось при загрузке страницы и через какое то время само закрылось.
Андрей, нужно к скрипту добавить строки:
А как по вашему лучше вставить ифрейм со страницей другого сайта, через такое окно оформленное стилями, или обычным всплывающим окошком (как в другой вашей статье)?
Скорее всего в оформленное CSS окошко будет трудно гармонично вписать сторонний сайт и смысла в этом оформлении не много, я правильно мыслю?
Лично я не очень люблю iframe.
Добрый день. А как сделать несколько всплывающих окон по разным ссылкам
Иван, для второго окна нужно везде (в HTML и JS) изменить идентификаторы окна (id) и соответственно добавить их в CSS стили.
Спасибо, после закрытия попапа, заново не открывается без перезагрузки страницы
İsmail! А Вы какое именно окно сделали? Javascript самый последний в статье установили тоже?
На редкость полезный сайт. Обычно не оставляю никаких комментариев. А тут просто не смог удержаться. Толково, доходчиво и в рабочем состоянии. Спасибочки автору.
Вот спасибо)))) Очень неожиданно)))