Модальные всплывающие окна с помощью CSS3 без Javascript
В очередной раз обращаюсь к теме создания модальных(всплывающих) окон. В последнее время меня все больше интересуют, различные техники исполнения всплывающих окон, без использования javascript, плагинов jQuery и т.д. Больший интерес вызывает возможность применения чистых стилей и неисчерпаемого потенциала новых функций CSS3.
Основываясь на разработках некоторых уважаемых буржуинов, они в этом плане ребята ушлые, получаются неплохие результаты, в плане создания модальных окон с помощью CSS3. Задача, в первую очередь состоит в том, чтобы добиться более-менее устойчивой кросбраузерности конечного результата, ну и конечно же, с наименьшими потерями, уменьшить общее количество кода, как в HTML так и в CSS, дабы облегчить жизнь многострадальным труженикам сайтостроения.
Что получается в итоге, у меня в этом плане на сегодняшний день, мы с вами и посмотрим, а заодно, и научимся делать всплывающие модальные окна с помощью «магии» CSS3.
Обновлено: 27.10.2017
Для начала, все те кого заинтересовала эта тема, можете взглянуть на пример работы модальных окон в различных вариантах и скачать исходники:
Не стоит воспринимать данный урок, как руководство к действию, так как на этом этапе удалось добиться уверенной поддержки лишь современными браузерами ( IE 9+, Firefox, Safari, Opera, Chrome ). С оглядкой на то, что древние версии браузера IE еще достаточно популярены среди пользователей, рекомендую рассматривать эту статью в виде некоего эксперимента, демонстрации возможностей CSS3.
Шаг 1. HTML
Во-первых, давайте создадим основную разметку HTML. Как вы можете видеть, базовая конструкция довольно простая, если рассматривать именно html-разметку модальных окон и кнопок(ссылок), для их активации. Каждое модальное окошко, представляет из себя ничто иное, как стандартный контейнер <div>, с определенным содержание внутри и кнопкой «Закрыть», сформированной исключительно средствами css.
Далее приведу пример базовой html-разметки всплывающих окон и ссылок активации:
<!-- Ссылки на вызов модальных окон--> <a href="#win1" class="button button-green">Открыть окно 1</a> <a href="#win2" class="button button-red">Открыть окно 2</a> <a href="#win3" class="button button-blue">Видео в окне 3</a> <a href="#win4" class="button button-orange">Фото в окне 4</a> <!-- Вызов окна через миниатюру изображения --> <a href="#win5"><img title="" src="img/realism_lrg.jpg" width="150" height="150" alt="" /></a> <!-- Модальное окно №1 --> <a href="#x" class="overlay" id="win1"></a> <div class="popup"> Здесь вы можете разместить любое содержание, текст с картинками или видео! <a class="close"title="Закрыть" href="#close"></a> </div> <!-- Модальное окно №2 --> <a href="#x" class="overlay" id="win2"></a> <div class="popup"> Здесь вы можете разместить любое содержание, текст с картинками или видео! <a class="close" title="Закрыть" href="#close"></a> </div> <!-- Модальное окно №3 --> <a href="#x" class="overlay" id="win3"></a> <div class="popup"> <h2>Заголовок</h2> Здесь вставляете видео своё или с любого стороннего ресурса, YouTube, Vimeo и т.д.(iframe, embed)... <a class="close" title="Закрыть" href="page.html" onclick="return false"></a><!-- Выключение видео при закрытии окна --> </div> <!-- Модальное окно №4 --> <a href="#x" class="overlay" id="win4"></a> <div class="popup"> <img class="is-image" src="ваша-картинка.jpg" alt="" /> <a class="close" title="Закрыть" href="#close"></a> </div> <!-- Модальное окно №5 --> <a href="#x" class="overlay" id="win5"></a> <div class="popup"> <img class="is-image" src="ваша-картинка.jpg" alt="" /> <a class="close" title="Закрыть" href="#close"></a> </div> |
В вышеприведенном примере кода, для наглядности, в контейнерах модальных окон прописал краткие пояснения. Вам остается по аналогии, в div-контейнер всплывающего окна, поместить любое свое содержание, будь то простой текст, картинки или видео с любого стороннего ресурса, YouTube, Vimeo и т.д. Ссылки на вызов модальных окон, можете сделать текстовыми, или же оформить их в виде замечательных, градиентных кнопок, как в примере.
Шаг 2. CSS
Следующий шаг, это самое интересное, важно подготовить все необходимые стили, для нашего модального окошка, оформить внешний вид и добавить функционала. Базовые стили страницы я опустил, чтобы не вносить сумятицу, а некоторые правила, для большей ясности, разбавил комментариями:
/* Базовые стили слоя затемнения и модального окна */ .overlay { top: 0; right: 0; bottom: 0; left: 0; z-index: 10; display: none; /* фон затемнения */ background-color: rgba(0, 0, 0, 0.65); position: fixed; /* фиксированное поцизионирование */ cursor: default; /* тип курсара */ } /* активируем слой затемнения */ .overlay:target { display: block; } /* стили модального окна */ .popup { top: -100%; right: 0; left: 50%; font-size: 14px; z-index: 20; margin: 0; width: 85%; min-width: 320px; max-width: 600px; /* фиксированное позиционирование, окно стабильно при прокрутке */ position: fixed; padding: 15px; border: 1px solid #383838; background: #fefefe; /* скругление углов */ -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; font: 14px/18px 'Tahoma', Arial, sans-serif; /* внешняя тень */ -webkit-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3); -moz-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3); -ms-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3); box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3); -webkit-transform: translate(-50%, -500%); -ms-transform: translate(-50%, -500%); -o-transform: translate(-50%, -500%); transform: translate(-50%, -500%); -webkit-transition: -webkit-transform 0.6s ease-out; -moz-transition: -moz-transform 0.6s ease-out; -o-transition: -o-transform 0.6s ease-out; transition: transform 0.6s ease-out; } /* активируем модальный блок */ .overlay:target+.popup { -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); transform: translate(-50%, 0); top: 20%; } /* формируем кнопку закрытия */ .close { top: -10px; right: -10px; width: 20px; height: 20px; position: absolute; padding: 0; border: 2px solid #ccc; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; background-color: rgba(61, 61, 61, 0.8); -webkit-box-shadow: 0px 0px 10px #000; -moz-box-shadow: 0px 0px 10px #000; box-shadow: 0px 0px 10px #000; text-align: center; text-decoration: none; font: 13px/20px 'Tahoma', Arial, sans-serif; font-weight: bold; -webkit-transition: all ease .8s; -moz-transition: all ease .8s; -ms-transition: all ease .8s; -o-transition: all ease .8s; transition: all ease .8s; } .close:before { color: rgba(255, 255, 255, 0.9); content: "X"; text-shadow: 0 -1px rgba(0, 0, 0, 0.9); font-size: 12px; } .close:hover { background-color: rgba(252, 20, 0, 0.8); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } /* изображения внутри окна */ .popup img { width: 100%; height: auto; } /* миниатюры слева/справа */ .pic-left, .pic-right { width: 25%; height: auto; } .pic-left { float: left; margin: 5px 15px 5px 0; } .pic-right { float: right; margin: 5px 0 5px 15px; } /* элементы м-медиа, фреймы */ .popup embed, .popup iframe { top: 0; right: 0; bottom: 0; left: 0; display:block; margin: auto; min-width: 320px; max-width: 600px; width: 100%; } .popup h2 { /* заголовок 2 */ margin: 0; color: #008000; padding: 5px 0px 10px; text-align: left; text-shadow: 1px 1px 3px #adadad; font-weight: 500; font-size: 1.4em; font-family: 'Tahoma', Arial, sans-serif; line-height: 1.3; } /* параграфы */ .popup p {margin: 0; padding: 5px 0} |
Как видите, дорогие друзья, всё довольно таки просто и никакой лишней мешанины. Если всё проделаете правильно, то получите в свой арсенал инструментов, замечательное модальное окно, в котором сможете разместить любой контент, будь то текстовое содержание, фотографии, различные формы регистрации и обратной связи, или же видеоролики из любого стороннего источника. Экспериментируйте с параметрами, видоизменяйте окно, как вашей душе угодно. По возможности, делитесь в комментариях своими наработками, или же возникшими вдруг проблемами.
А может и это вам будет интересно:
Дополнения:
Часто, даже очень часто мне задают вопрос, как же правильно останавливать воспроизведение видео при закрытии мод. окна. При закрытии модального окна, проигрывание видеоролика в демо останавливается. В демо использовал событие onclick, для кнопки закрытия окна, указав в ссылке адрес демо-страницы, т.е. страницы, на которой расположено окно с видео:
<a class="close" title="Закрыть" href="demo.html" onclick="demo.html(); return false;"></a>
Можно просто использовать ссылку с пустым атрибутом href="/", в обоих случаях происходит перезагрузка страницы и соответственно закрывается, и окно, и останавливается видео, костыль ещё тот конечно, но другого более действенного и валидного решения, без подключения javascript, на данный момент у меня нет.
В обновлении к статье Модальный блок видео на CSS3 расписал способ остановки видео с подключением в работу jQuery и YouTube JavaScript Player API. Видимо стоит продублировать и здесь.
Метод отлично срабатывает для встроенного видео с YouTube. В первую очередь, вам понадобится подключить библиотеку jQuery (если таковая у вас отсутствует), например, с сервиса Google Code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> |
Затем подключаете YouTube JavaScript Player API:
<script type="text/javascript" src="https://www.youtube.com/player_api"></script> |
С помощью API JavaScript, вы сможете управлять проигрывателем Chromeless Player и встроенным проигрывателем YouTube с помощью javaScript кода. Для нашего модального блока с встроенным видео, исполняемый js будет таким:
<script> var player; function onYouTubePlayerAPIReady() { player = new YT.Player('player'); } $('#stop').click(function(){ player.stopVideo() }) </script> |
Далее, фрейму(iframe) с видео, необходимо присвоить идентификатор, пусть это будет id="player".
<iframe id="player" width="853" height="480" src="https://www.youtube.com/embed/1IrR7l9pGF0" frameborder="0" allowfullscreen=""></iframe> |
Кнопке закрытия модального окна, так же прописываем свой id:
<a href="#close" id="stop" title="Закрыть" class="close"></a> |
При клике по кнопке с id="stop" будет вызвана функция player.stopVideo (), окно закроется и воспроизведение видео остановится.
Однако следует понимать, что для других видео-сервисов и танцы с бубнами будут другими))). Хотя всегда есть выбор — это использовать готовые специализированные плагины.
Веб-дизайнеры и предприниматели, которые живут в русскоговорящих странах, наверняка хотят иметь возможность пользоваться не только англоязычными шаблонами. Они также хотят иметь доступ к коллекциям русскоязычных готовых решений. Поэтому хотим обратить ваше внимание на новейший раздел HTML шаблонов на русском языке, который теперь представлен на маркетплейсе TemplateMonster. Стоит упомянуть о том, что текст для каждого из шаблонов был написан вручную. К тому же, вам не нужно обладать какими-то сверхъестественными знаниями в сфере программирования, чтобы создать впечатляющий онлайн-проект.
Буду признателен, если поделитесь ссылкой на запись в своих соц-сетях:
В IE все равно не работает…
SGanabiS
Будьте пожалуйста поточнее, что именно не работает в IE и в какой именно версии этого недобраузера. Разгадывать загадки не мой профиль и к сожалению я не телепат.
Все работает прошу прощения…
Вот видите, как все просто. 🙂
Спасибо, на самом деле ваш пример работает… после некоторых манипуляций и изменений (стили, и добавление формы регистрации) перестает работать в IE, в остальных браузерах все ок. Скорее всего косяк в моих кривых руках. Буду разбираться, если не получится — побегу к Вам.
Всегда рад помочь. Удачи!!!
Это всё замечательно, и отлично работает, но вот что-то я никак не возьму в толк, как сделать, чтобы окно само по себе открылось через пару секунд после загрузки страницы? Если ставить редирект, то он зацикливается.
Tibedox.
Для реализации вашей идеи лучше использовать javascript, примерно так как описано в статье Стабильный информационный блок. Элементы оформления, размер и позиционирование всплывающего окна легко сможете изменить экспериментируя с параметрами стилей CSS.
Спасибо за помощь. В фоксе всё работает отлично, однако пришлось отказаться от этой затеи, так как времени мало, а настроить для IE я сходу не смог.
Александр. Доброго времени суток.
Всеми фибрами своей души, целиком и полностью с вами согласен. Но реальность именно такова, что огромное количество пользователей сидят на IEшке и с этим как ни крути приходится считаться. Хотя я часто тоже забиваю по полной на то как пережует мои эксперименты с CSS3, этот недобраузер. 9 И 10 версии IE, стали более или мене «сговорчивее» в плане поддержки функций CSS3, но по прежнему нет-нет да и ломают общую картинку. Конечно же никто не собирается и будет отказываться от интересных идей и решений в угоду
одного го…ого и крайне неудобного браузера.
А iframe поддерживает?
Поддерживает.
В примере, видеоролик с Yuotube встроен в модальное окно именно с помощью iframe.
Во-первых, спасибо за такие замечательные окна: выглядит очень эффектно и работает надежно.
Одно не пойму. Тут обсуждали работу этих окон в ИЕ. И, вроде, как сошлись на мнении, что в ИЕ они тоже должны работать. К сожалению, у меня их запустить в ИЕ не получилось, даже в «чистом» виде (файл ДЕМО). Версия — 8 под XP.
Все остальные браузеры (опера, хром, мозилла) отображают нормально. Может над самим браузером ИЕ с бубном потанцевать нужно? 😉
luckywalrus. Спасибо за отзыв.
Да, к сожалению IE 8 и более старых версий, не поддерживают большинство свойств CSS3 и танцы с бубном тут не помогут. Начиная с версии IE 9+, мягкотелые снялись с ручника, повернулись лицом к разработчикам и включили поддержку CSS3, правда не в полном объеме, но хоть что то.
Здравствуйте! Спасибо за полезный урок! Подскажите, как отцентрировать в ИЕ текст? Во всех нормальных браузерах text-aligne: center нормально показывает текст, а в ИЕ в угол съезжает, гад:)
Здравствуйте!
В классе .popup изменяете значение свойства text-align: justify; на text-align: center; Все прекрасно работает в IE 8+ да и во всех других. Можете непосредственно в html для выравнивания текста по центру, использовать теги заголовков h1 h2 и т.д. или тег параграфа p с атрибутом align=”center”. Тоже самое при работе с тегом div.
Обратите внимание на различные бесплатные и премиум уроки по web-дизайну, о которых мой блог так и кричит. AУ-У!
Удачи!
Большое спасибо за оперативный ответ!!
text-align: justify не дает эффекта в ИЕ8, а жаль:)
Обязательно изучу Ваш замечательный сайт прямо сейчас:)
Желаю Вам всяческих успехов!
Можно замечательно обходиться и без этого свойства, хотя иногда текст выравненный с помощью этого значения выглядит очень даже привлекательно и вполне уместно.
Обидно.но не заработало! А очень хотелось! Кроме эффекта “сумерки! не чего не выходит. А очень хочется. Если у Вас будет время посмотрите пожалуйста! Заранее благодарен.
День добрый.
Вам необходимо убрать теги p и /p у ссылок активных модальных окон, да и br/ совсем ни к чему ))))
У вас сейчас так:
<p><!-- Модальное окно №1 --><br /><a href="#x" class="overlay" id="win1" rel="nofollow"></a> </p>
Сделайте просто вот так:
<!-- Модальное окно №1 --><a href="#x" class="overlay" id="win1" rel="nofollow"></a>
Над видом кнопки закрытия(размер, цвет, позиция) поэкспериментируйте в классе .close, или же просто скопируйте css код кнопки из урока.
Спасибо за ответ!!! Не помогает… кнопки «склеились» и все. Код взят из урока 1к1…там тоже стоят теги р и br Да и в исходный код они пропишутся автоматом даже если их и уберешь… экспериментировал уже по всякому… Размещение CSS может влиять?
Все заработало!!! Спасибо!! дело в авто форматировании Ворд Прессом. И…всего навсего установка чистого вордпресса на под домен…тестирование-впустую…установка и проверка 14 плагинов-впустую!! 15!!только 15-й найденный у японцев помог! Боже как я люблю WordPress!!
Очень рад за вас. Заходите почаще, вместе все у нас получится!
Здравствуйте! А почему само видео не идёт? Или это только у меня не идёт?
Iana, Здравствуйте.
Да это только у вас не идёт:)))
Странно, что после нескольких тестов у других людей тоже не шло. Я из класса popup убрала transform полностью, добавила position absolute и выровняла с помощью margin и всё отлично работает.
Здравствуйте!
Использовал Ваш код на своей странице, немного подкорректировав(добавил скроллинг, изменил размеры окна)
Но не могу понять, почему у меня текст внутри окна будто полупрозрачный… ( ссылка «старые записи»)
Все остальное устраивает, хотя с удовольствием воспользовался бы предложенным здесь но, к сожалению, исходник там не прилагается.
Кроме того, выше в фрагменте кода
<a href="#win1" rel="nofollow"></a>не нашел в css элемента win_pop, не знаю, насколько это критично.Andrew.
На счет исходников, это дополнение к основному уроку Модальное окно с помощью CSS и jQuery, вам остается только добавить в окно полосу прокрутки, как это сделать и рассказано в статье.
Идентификатор win_pop, можете смело игнорировать ))), бывает, рабочий процесс, запарился, прописал из чернового варианта. Спасибо, поправил в записи пример кода ссылок вызова окна.
Прошу прощения, все наладилось…
Просьба насчет исходника с dbmast.ru/modalnoe-okno-s-polosoj-prokrutki остается в силе
Ну и славненько.
Про исходники ответил.
Спасибо, просто хочется как можно меньше использовать сторонних скриптов. А здесь все устраивает, единственно, с добавленным скроллингом кнопка закрытия тоже уезжает
Andrew.
Вы наверное что то не правильно делаете добавляя полосу прокрутки. Специально протестировал с различным содержанием, все прекрасно работает и кнопка закрытия находится там где ей и положено ))).
Вставьте в тело модального окна следующее:
<div style="padding: 20px;overflow: auto;
width: 480px;
height: 300px;
background-color: #ffffff;">
Какой-нибудь стишок незамысловатый, для объема содержания.
Бла-бла-бла - (текст) Бла-бла-бла - (текст) Бла-бла-бла - (текст)
Бла-бла-бла - (текст) Бла-бла-бла - (текст) Бла-бла-бла - (текст)
</div>
Уверен, все у вас получится.
Благодарю за подсказку!
Текст с прокруткой помещен еще в один div с overflow:auto, а после следует ссылка на закрытие окна (возможно, термин неточный). Получилось что-то вроде этого:
(div class=”popup” style=”height%; width:85%; padding: 0 20px;”)
(div style=”position: absolute; left:0; bottom:0; height:90%; width:96%; padding: 0 15px; overflow-y:auto;”)
текст с прокруткой
(/div)
(a class=”close” title=”Закрыть” href=”#close”)( /a)
(/div)
проценты во втором div подбирал опытным путем.
угловые скобки коммент не принимает,поставил круглые:)
Спасибо за участие!
Не знаю, может вам так сподручнее, но все параметры основного блока окна необязательно прописывать в первом div, все прекрасно корректируется через класс «popup» в таблице стилей. Да и в принципе, ширина, высота и отступы в основном div (в разметке html) совсем необязательны, так как окно подстроится под содержание, учитывая выставленные значения в css.
Экспериментируйте, тестируйте в различных браузерах и выберите самый оптимальный вариант.
Удачи!
Скажите а как вместо текста в всплывающем окне использовать ссылку на другую страничку, например я нажимаю на «открыть окно 1» я вылезает новая вкладка ?
Спасибо большое! Прекрасный пример! Всё отлично работает!)
Спасибо! Помогла статья
Спасибо за урок, очень пригодился при разработке моего сайта. 🙂
Добрый день не могу вставить это окошко в запись WordPress. Хоть намекните где копать! Зарание благодарен.
День добрый.
В статье все предельно ясно расписано. В вашем случае, вставьте код css в файл style.css вашей темы WP, а дальше по примеру, в записи используете html разметку модального окна и ссылок для его активации
Сделал все и после открытие только экран темнеет а окошка нету.
А не подскажите, такой вариант возможно где-нибудь найти:
Работают отлично только 2 всплывающих окна, но третье наотрез отказывается открываться, страница опускается вниз и больше ничего не происходит, все команды написаны верно
Все окна в примере одинаковы, различаются лишь содержанием, так что не совсем понимаю сути вашей проблемы (
При повторной вставке на свою страницу (полный бекап страницы), все получилось, сам не понял почему так было. Получалось так, вставляем ссылку на win1, вставляем текст win1, работает, вставляем ссылку win2 и текст win2, работает, вставляем ссылку win3 и текст win3, не работает. Удаляем текст win2, тогда win3 работает, все проверял несколько раз, все производилось копированием, ошибки исключены. Помог только полный бекап страницы и повтор процедуры с нуля.
Отличные модальные окна, лучшие в инете. Единственное, что не смог сделать, задать жесткие границы длины всплывающего окна и его строгозаданного положения, на различных мониторах она получается разной при параметре «left=50%»
Спасибо за отзыв.
Размер всплывающего окна, задавался с расчетом на изменение в зависимости от просмотра на различных пользовательских устройствах (мониторах комп., планшетах и т.д.).
Большое Спасибо! Замечательный пример!
Абсолютно незначительные вещи:
Описание стиля на странице и стиля из примера доступного по ссылке «Download» немного отличаются. Конкретно, разница в правильности расположения кнопки «закрыть» и ее рамки.
Так же по неопытности пытался использовать данный стиль на странице с twitter bootstrap. Появился конфликт стилей классов, конкретно класса все той же кнопки .close. А в дальнейшем вообще оказалось что у данного фреймворка есть свои красивые модальные окна.
Спасибо за отзыв.
Относительно различий кодов в примерах статьи и исходников для скачивания. Часто в код примера статьи вносятся некоторые изменения по ходу обсуждения, или применения новых стандартов и параметров CSS3. Для скачивания представляется демо-страница и файл стилей(если есть) без изменений, т.е. такими, как есть на время написания статьи. В случае обновления кода до более стабильной, корректно работающей версии во всех браузерах, изменения обязательно вносятся и в архив с исходниками.
Бывает, что в запарке я не успеваю вовремя сделать обновление архива.
Так что, еще раз спасибо, архив обновлен))).
Почему то в IE не открываются… В чем может быть загвоздка?
Проверил, все прекрасно открывается и в IE и в других браузерах тем более)) Загвоздка только на вашей стороне, откуда мне знать, может вы на IE 6 сидите )))
Да не открывается в IE8. IE8-штатный браузер XP, и если в нём не открывается то коду грош цена.
Скорее всего загвоздка в rgba, с которым браузер не умеет работать. В лайгхтбоксах обычно в таких случаях меняют слой rgba на полупрозрачный psd. Тогда работает.
Спасибо, очень помогло)
Не подскажите, почему в данном модальном окне размывается немного текст и картинки? Можете посмотреть здесь freelanca.ru
В любом тарифе нажмите на «Подробнее». Особенно размыт в VIP-тарифе.
Проверил, все из за «transform» в классе .popup. Убираешь, все становится четко, но окно не централизуется и убегает вниз, вправо.
Иван.
Особой размытости текста я не заметил у вас на сайте. Но если вам так кажется, то просто уберите или закомментируйте
transformи соответственно без трансформации необходимо будет задать необходимую фиксированную ширинуwidth(напримерwidth:500px;для ваших объявлений) и выровнять окно с помощьюmargin-left:-290px; margin-top:-235px;, тогда окно будет выводится по центру.И все же не забывайте, что этот способ всплывающего окна с помощью CSS3, не поддерживается IE8 (пока).
Удачи!
А можно ли вставить в модальное окно флеш (swf) и аудио?
Можно вставить в окно все что угодно )))
Огромное спасибо за урок! Очень пригодился! Автору 5+
За отзыв спасибо и я очень рад, что вам пригодилось.
Здравствуйте, меня интересует такая штука… хочу сделать так чтоб в модатьном окне отображалась страница, html код которой находился бы отдельно (как страница), это возможно? то есть будет постоянная кнопка, которая присутствует на всех страницах сайта и чтоб код не менять в каждой страничке надо вывести ее отдельно.
Заранее благодарю!
Добрый вечер.
Все возможно. Создаете страницу например bla-bla.html и вставляете в блок модального окна фрейм с адресом этой страницы. Все тоже самое, как и в случае с вставкой видео с YouTube. В html это выглядит так:
<div class=”popup”>
<iframe src=”http://вашсайт.ru/bla-bla.html”></iframe>
<a class=”close” title=”Закрыть” href=”#close” rel=”nofollow”></a>
</div>
<div class=”popup”>
<iframe src=”http://вашсайт.ru/bla-bla.html”></iframe>
<a class=”close” title=”Закрыть” href=”#close” rel=”nofollow”></a>
</div>
спасибо;)
Спасибо большое за всплывающие окна, но есть небольшой вопрос, не могли бы Вы связаться со мной через скайп и помочь в решении некоторых проблем? Напишите свой скайп в комментарии или сюда 161rus.zver@gmail.com
Добрый вечер.
Evgeny. Связаться со мной вы можете через форму обратной связи на странице Контакты. И пожалуйста, указывайте свой реальный E-mail. Тогда я вам обязательно отвечу и помогу чем смогу ))).
Еще раз спасибо за помощь, а не подскажите, как сделать, чтобы кнопки были одного размера?
Скажите пожалуйста как сделать так чтоб видео в модальном окне останавливалась при выходе из него?? заранее спабибо
Здравствуйте.
Добавьте ссылке кнопки «Закрыть» окна с видео событие
onclick = "document.location.reload()". Наверное не самое лучшее решение, но работает. В html вся конструкция кнопки «Закрыть» будет выглядеть так:<a class="close" title="Закрыть" href="/" onclick = "document.location.reload()" rel="nofollow"></a>Да, теперь работает! Только не срабатывает если кликнуть не по кнопке, а рядом с окном!
Огромное спасибо! Яваскрипт не всегда срабатывает корректно, а тут простое и изящное решение!
Спасибо, товарищ, ты делаешь хорошее дело! Подошел скрипт 100 %!
Подскажите, как сделать чтоб по переходу на target=”_blank” с ссылки в модальном, осуществлялся переход, а модальное в предыдущем окно закрывалось
Уже сам разобрался)
Спасибо!
Пожалуйста! )))
создаю сайт и постала проблема прикрутить диалоговое окно и еще, что оно должно быть тез Кюри. Эти примеры не работают в ИЕ 7, но вот буду надеятся, что заработают в 9-ом! А так, примеры замечательны и доволи просты!
Спасибо!
Очень легкий и приятный код )
Только вопрос: как сделать, чтоб окошко появлялось непосредственно с ссылкой открытия? то есть задавались ему сразу стили отступов.
Azur. За отзыв спасибо. А вот с постановкой вопроса сплошные непонятки. Зачем ссылке открытия модального окна появляться вместе с окном? Да и отступы все прописаны надежно и надолго в css )))
Отличная статья.
Хотел «запихнуть» во всплывающее окна карту от google.
не знаю, как подступиться. Буду признателен за совет.
Спасибо. Разобрался. Сначала спрашиваем, затем думаем, затем делаем.
Лучше и не скажешь 🙂 За интерес к статье, отдельное спасибо.
Удачи!
Здравствуйте, не могли бы Вы подсказать как можно привязать Ваше модульное окно к моему сайту, сам пробовал ни чего не вышло. Я хотел его использовать как увеличение картинки товара и сделать из него «быстрый просмотр товара». Но не получается привязать к id товара. Честно сказать затупил. Может поможете, что нужно сделать. Сей час когда я пробовал он вытаскивет первую картинку с id=1. Спасибо за помощь.
Здравствуйте, Александр.
Какой бы то ни было автоматической фильтрации содержания модальных окон не предусмотрено, все нужно прописывать руками в вашем случае. Ссылку на вызов модального окна, например, название товара выполняете как в статье, уменьшенная картинка или кнопка «Подробнее», связываете через атрибут
href="#win1"с окном<a href="#x" class="overlay" id="win1" rel="nofollow"></a>И уже непосредственно внутри блока<div class="popup">размещаете краткое описание товара и увеличенную картинку.Если под каждый продукт у вас отдельная страница, то ничего не мешает вставлять описание товара в окно через
iframe, соответственно при необходимости прописав нужную вам ширину и высоту содержания, например так:<iframe width="500" height="360" src="как там у вас.html" frameborder="0" allowfullscreen></iframe>Попытался на уровне телепатии, если не смог помочь извините, чудеса не мой профиль. Вообще у вас много чего там уже подключено, только вот не работает(((.
Удачи!
Всем привет! Всё отображается хорошо, вот только у меня после закрытия окна с видео, это окно продолжает жрать память, проц и сеть- хотя самого окна уже не видно. А если это окно открыть второй раз, то этот ролик продолжается с того места на котором я закрыл окно. Как это исправить? У меня установлены: Windows 7 x64 bit, Opera 12.02, FlashPlayer 11.5…
Пока не разобрался с этим багом. Воспроизведение видео останавливается именно через плеер, а не при закрытии окна, что конечно не очень удобно. Перезагрузка страницы решает все проблемы с продолжением воспроизведения, ролик возвращается в начальное положение.
Вообще видео встраивал лишь для примера функциональности модального окна. Раз есть вопросы, значит стоит заняться решением. Надеюсь и читатели блога подключатся к работе. А пока останавливаем видео в плеере, затем лишь закрываем окно )))
Привет! Вот в этом вашем примере(dbmast.ru/vstraivaem-video-v-modalnoe-okno) видео останавливается при закрытии окна, может оттуда что нибудь взять и вставить в этот пример, или как нибудь привязать кнопку «закрыть окно» к кнопке «стоп» на плеере или к перезагрузке страницы. Например при закрытии окна сначала сначала срабатывает кнопка «стоп» на плеере, а потом закрывается окно, или сначала срабатывает кнопка «закрыть окно» а потом перезагрузка страницы.
Спасибо за статью — очень качественная:)
Подскажите, пожалуйста, как сделать так, чтобы окно всплывало в центре экрана?..
Петр, Здравствуйте.
Специально проверил во всех браузерах(мне доступных), окно всплывает там где ему положено по настройкам, в центре экрана, разве чуть ближе к верхнему краю
Здравствуйте. Спасибо за столь отличное решение.
У меня маленькая проблемка, может сможете подсказать,
все работает отлично, только при появлении окна, не затемняется меню на сайте.
Его так же отлично видно, как и само окно…
Обратите внимание на значение свойства
z-index: 1в секции.overlayстилей модального окна.Ой спасибо. Верстаю редко, вылетело из головы свойство…
Здравствуйте! Отличное решение для всплывающих окон, большое спасибо!!!
Подскажите пожалуйста. У меня на страничке несколько кнопок вызывающих одну и ту же обратную связь (на всплывающем окне), расположены они на неком расстоянии друг от друга. Как можно сделать так чтоб окно всплывало всегда только в области кнопки его вызова? У меня окно всплывает только там где расположен блок модального окна. И выходит так что кнопку я жму далеко в конце страницы, а окно всплывает в начале (там где расположен). Возможно ли решить такую проблему?
Здравствуйте, Татьяна.
По умолчанию для
.popupя установил абсолютное позиционированиеposition: absolute;, измените его на фиксированноеposition: fixed;и окно будет появляться ровно по центру, при любом раскладе страницы.Спасибо)
Здравствуйте, сделал все вроде правильно, но при закрытии окна, ролик продолжает играть, как исправить?
Извините Евгений, но мне отсюда как-то и не видно, хотелось бы хоть немного конкретики. В примере, да и не только, всё работает без какой-либо магии. Опишите проблему, обязательно помогу.
Можете дать контакты пожалуйста?
Здравствуйте! Очень понравилось спасибо. Только хотелось подключить чтобы сразу появлялось окно при заходе на сайт. Если это возможно сделать то напишите пожалуйста.
С уважением спасибо!!!
Здравствуйте, Сергей. Я так понял, вам нужно всплывающее окно при загрузке сайта, тогда читайте: Создаем всплывающее окно при загрузке сайта с помощью CSS3
Спасибо большое за новость )))
Нет ли возможности прокрутки для всплывающего окна?
Если фото слишком большое например
В конкретном решении, упор был сделан именно на автоматическую подстройку масштабных изображение под размеры окна, т.е. при установленной максимальной ширине окна
max-width: 600px;встроенное изображение будет выводиться с учетом этого значения, минус внутренние отступы, сделано это как раз для того чтобы избежать использования полос прокрутки. Если вам так необходимо видеть полосы прокрутки, то используйте свойствоoverflow:auto;илиoverflow:scroll;, только вот от кнопки закрытия в данной конструкции придётся отказаться или полностью менять всю структуру вывода и позиционирования окон с кнопкой закрытия.У каждого решения существуют те или иные цели и задачи, конечно хотелось бы найти универсальное, но это практически невозможно, потому как сколько пользователей, столько и различных требований. Каждый эксперимент или очередная разработка — это интересный, но в тоже время трудоёмкий процесс, так что пока только так )))
Здравствуйте!
не могли бы вы подсказать, как сделать следущее: есть небольшой текст, при нажатии на ссылку «Подробнее» во всплывающем окне показывался бы основной текст с картинкой. Я понимаю, что ваш код должен подходить для исполнения данной задумки, но не понимаю куда вставлять html код. Не судите строго.
Здравствуйте, Андрей.
Вся конструкция будет следующая:
<!– Ссылка на вызов первого мод.окна –>
<a href=”#win1″ class=”button button-green” rel=”nofollow”>Подробнее »</a>
<!– Модальное окно 1 –>
<a href=”#x” class=”overlay” id=”win1″ rel=”nofollow”></a>
<div class=”popup”>
ЗДЕСЬ ВСТАВЛЯЕТЕ ЛЮБОЕ СОДЕРЖАНИЕ……
<a class=”close” title=”Закрыть” href=”#close” rel=”nofollow”></a>
</div>
<!– Ссылка на вызов первого мод.окна –>
<a href=”#win1″ class=”button button-green” rel=”nofollow”>Подробнее »</a>
<!– Модальное окно 1 –>
<a href=”#x” class=”overlay” id=”win1″ rel=”nofollow”></a>
<div class=”popup”>
ЗДЕСЬ ВСТАВЛЯЕТЕ ЛЮБОЕ СОДЕРЖАНИЕ……
<a class=”close” title=”Закрыть” href=”#close” rel=”nofollow”></a>
</div>
Для каждого нового мод.окна присваиваете свой идентификатор
id="win2“,id="win3"и т.д… главное чтобы он соответствовал id в ссылке на вызов.Ссылки на вызов окон у меня оформлены ввиде кнопок разного цвета, за это отвечают определённые классы, в данном конкретном примере указан
class="button button-green", кнопка будет зеленого цвета, если вам не нужно такое оформление, просто не прописывайте в ссылке «Подробнее» этот класс или же используйте другой, соответствующий тому или иному цвету.По умолчанию доступны такие цвета кнопок:
class="button button-green"– Зелёныйclass="button button-red"– Красныйclass="button button-blue"— Синийclass="button button-orange"— Оранжевыйclass="button button-pink"— Розовыйclass="button button-gray"— Серыйclass="button button-darkblue"— Тёмно-синийclass="button button-purple"— ФиолетовыйУдачи!
Спасибо за подсказку. А зачем прописывать rel=”nofollow”? У меня в окне будет не дублированный текст. Как вы думаете, а поисковики будут индексировать текст во всплывающем окне?
Как я понял эту конструкцию на вызов модального окна необходимо просто вставить в текст, в том месте где я хочу вывод окна, а стили прописать в файле CSS , так? Извините за массу может быть не самых умных вопросов.
Добавил в блок с 1-м товаром ссылку на всплывающее окно с инфо о доставке и оплате:
ga100.casio55.com
Пробема в том, что прокрутка не осуществляется внутри самого всплывающего окна и весь текст не попадает на экран. Что нужно изменить в стилях, чтоб появилась прокуртка внутри самого окошка?
Поместите все содержание внутри модального окна в дополнительный div-контейнер, всё кроме кнопки закрытия, получится должна примерно такая картина:
<div class=”popup”>
<div>
Сюда размещаете любое содержание, картинки, текст, и т.д….
</div>
<a class=”close” title=”Закрыть” href=”#close” rel=”nofollow”></a>
</div>
<div class=”popup”>
<div>
Сюда размещаете любое содержание, картинки, текст, и т.д….
</div>
<a class=”close” title=”Закрыть” href=”#close” rel=”nofollow”></a>
</div>
Далее вам нужно в CSS найти следущие селекторы:
.popup p, .popup div {
margin-bottom: 10px;
}
.popup p, .popup div {
margin-bottom: 10px;
}
Разбить их на отдельные классы, чтобы параграф p и блок div не дублировали свойства, и добавить полосу прокрутки для блока div, а также выставить нужную вам высоту этого блока, должно получиться следующее:
.popup p{
margin-bottom: 10px;
}
.popup div {
overflow:auto;
height: 500px;
}
.popup p{
margin-bottom: 10px;
}
.popup div {
overflow:auto;
height: 500px;
}
Как понимаете, значение
height: 500px;я указал лишь в качестве примера, выставляете своё и радуетесь модальному окну с полосой прокрутки. Думается мне что всё же зря я не разъяснил в статье возможность внесения таких изменений.Удачи!
Что-то совсем некрасиво получилось. Это у меня в самом содержимом окна проблемы или что-то ещё подстроить нужно?
Спасибо огромное!!!
Особенно за оперативность и конкретику!!!
Рад, что у вас всё получилось.
Все очень классно!
Но почему опера не открываются эти окна…
Здравствуйте Валентина.
Значит именно у вас неправильная Opera))) Всё и везде открывается и закрывается, проверенно не раз!!!!
Если в Opera (версия 12.11, в более новой не пробовала) кликнуть на надписи на кнопке («Открыть окно 1», например), то окно не откроется. Если попасть не в область надписи, а на саму кнопку, то откроется.
Как Вы осуществили закрытие модального окна в любом месте посредством CSS?. Смотрел Ваш код, но не нашёл.
Здравствуйте, Михаил.
Всё очень просто, CSS здесь не причём, каждое окно это div-контейнер с одинаковым классом
popup, для фона затемнения использовал тег a (т.е ссылка) с классомoverlayи определённым идентификатором id, для открытия того или иного окна, в соответствии с id в кнопке на вызов.Вся хитрость заключается именно в использовании ссылки в формировании фона затемнения:
<a href=”#x” class=”overlay” id=”win1″ rel=”nofollow”></a>
<a href=”#x” class=”overlay” id=”win1″ rel=”nofollow”></a>
Если вы будете использовать, например тот же div, для затемнения фона вместо тега a:
<div class=”overlay” id=”win1″></div>
<div class=”overlay” id=”win1″></div>
всё будет прекрасно работать, но окно будет закрываться только по нажатию на кнопку закрыть.
Удачи!
Спасибо, driver!
Сейчас попробую.
Идею Вы мне подали закрытия окон в произвольном месте, но реализовал её по своему и получилось.
Не получается сделать только плавное выпадение меню и появление модальных окон. Не могли бы Вы посмотреть мою реализацию… да и просто похаить моё творение)))
Добрый день.
Подскажите пожалуйста, как можно сделать полосу прокрутки в Ваших окнах?
Здравствуйте, Сергей.
Я уже отвечал по поводу полосы прокрутки в комментариях: См. Здесь
Спасибо большое и прошу прощения за мою невнимательность. Все получилось.
Сделал модальное всплывающее окно по вашеу примеру! Получилось очень хорошо!
В окно вставил форму компонента RSform Pro, все работает хорошо, но сообщение благодарности скрывается после того, как клиент нажимает кнопку отправить.
Подскажите как сделать, что бы окно не скрывалось после нажатия кнопки «Отправить»?
Ни чем не могу помочь, так как не знаю какой обработчик у вас задействован, как он настроен на действия после отправки сообщения, любая кнопка внутри блока модального окна никак не влияет на его закрытие, закрывается окно только по кнопке закрыть или при клике вне окна, во всех других случаях происходит перенаправление по адресу ссылки в кнопке, если не задан
target="_blank"(открывать ссыль в новой вкладке) и т.д. Что должен увидеть пользователь после отправки сообщения, какая инфа должна выводится, и вообще уходят ли сообщения, наконец, что у вас прописано в атрибутеaction=""тега form? Обработчик формы в этом случае играет не последнюю роль, может он перезагружает страницу и т.д. и т.п… Мне трудно давать советы, не обладая способностями телепата)))Спасибо за ответ! Тут нужно работать именно с формами, а не модальным окном.
Просто не представляете как меня выручили!)) Громаднейшее спасибо!)
Отличные примеры! Но есть большой минус, при увеличении (ctrl + «+») выглядит неприятно. Исправьте этот баг.
Здравствуйте, Дмитрий.
Не заметил ничего неприятного при масштабировании страницы. Мне не совсем понятно, что вас не устраивает.
А как сделатьтак? если имеется:
Сходу не получилось заделать модальное окно по нажатию кнопки submit
Добрый день. Можно ли каким-то образом в примере с видео сделать так, чтобы оно прекращало проигрываться при закрытии без перегрузки страницы?
Назим. День добрый.
К сожалению у меня нет на сегодняшний день стопроцентно рабочего решения, без перезагрузки страницы.
Здравствуйте! В IE окно прижимается к левой стороне браузера, как решить эту проблему?
Здравствуйте, Илья.
Это моя ошибка, при очередной модификации не указал определённое значение для ширины модального окна в CSS. Чтобы исправить положение окна, достаточно в селекторе
.popupпрописать нужное вам значение ширины мод.окна, в демо-версии использую:width: 600px;, вы можете выставить любое другое. В этом случае окно будет появляться там где ему положено, т.е. точно посередине. Спасибо, что указали на ошибку.Вопрос а как сделать что бы текст прокручивался в открытом окне????
сори нашел!!!!
Привет помогите ,кнопка не краситься и прокрутка не получаеться ,перестает работать и текст пропадает
Чем же я вам помогу не видя пациента? )))
как отправить тебе код?? у меня фигня получаеться??
сайт lc-zarnica.ru
Спасибо большое!!!!!!!!
Спасибо!
Очень доходчиво и понятно. Получилось с первого раза!)
Спасибо! Просто и понятно! Здорово!
попробовал ваш метод, как только заменяю на свой текст модальные окна больше не появляются при нажатии, в чем может быть проблема?
Даже не представляю. Такого в принципе не может быть, если конечно, вставляя текст не нарушаете структуру html.
Добрый день, подскажите пожалуйста, как сделать так, чтобы это окно само пропадало через 5 секунд после появления?(Автоматически закрывалось)
Добрый день! Вставил данный код+ css в шаблон вордпресс, экран затемняется, окно не выводит. Пожалуйста подскажите в чем может быть причина?
Не подскажите как в wp можно прикрутить выпадающее окно к одному из пунктов меню? Есть раздел онлайн-трансляция, при нажатии на который нужно, что бы выводилось всплывающее окно.
пропишите в href нужного вам пункта, id соответствующий идентификатору модального окна, например вот так:
<a href=”#win1″ rel=”nofollow”>Онлайн-трансляция</a>
<a href=”#win1″ rel=”nofollow”>Онлайн-трансляция</a>
rel=”nofollow” не пишите, это у меня плагин все ссылки в комментах кроет))))
Ниже приведен код с файла header.php , вставил в него строку li a href=”#win3″ rel=”#win3″>ОТВ online , не срабатывает.
Но что интересно, я так же создал страницу в которой вставил код от данного меню и прописал к нему стили приведенные в статье. На данной странице все работает
+ если потом с этой страницы нажать на пункт меню из которого не получается сделать вывод в виде выпадающего окна, все работает.
Не подскажите пожалуйста, какие еще могут быть варианты решения данной задачи?
div id=”cats”
ul
li a href=”/” title=”« class=»active”>Новости /li
li a href=”#” rel=”toggle[categories]« title=»”>Программы /li
li a href=”#” rel=”toggle[archives]« title=»”>Архивы
li a href=”#win3″ rel=”#win3″>ОТВ online
‘custom-menu’ , ‘container’ => ” , ‘fallback_cb’=> ‘custom_menu’ , ‘depth’ => 1 ) ); }
else
{ custom_menu (); }
?>
li a href=”#” rel=”toggle[search]« title=»”>Поиск
/ul
/div
/div
div id=”categories”
ul class=”mcol2″
Driver огромное спасибо!)) Я счастлив!!!
А я то, как рад!)))))
А можно пример того как при нажатии кнопки в форме всплывало окно того что идет загрузка файла допучтим?
Добрый день. Спасибо за замечательную статью, очень помогла. Но не все так радужно, мне нужна ваша помощь. Я использовал попап на своем сайте (www.formprint.ru) для формы заказа (при нажатии на кнопку «заказать») В окне заказа 3D печати (formprint.ru/#win1) у меня есть спойлер с ценами.Как мне сделать так, чтобы при раскрывании спойлера увеличивалась высота попапа? А то получается, что у меня информация, после открытия спойлера, уходит за пределы формы. Буду очень признателен, если уделите время моей проблеме. Спасибо
Здравствуйте, Игорь. Вы, для модального окна прописали фиксированные размеры ширины и высоты непосредственно в div-е:
<div class=”popup” style=”width:370px; height:570px;”>
<div class=”popup” style=”width:370px; height:570px;”>
Достаточно указать значение
autoдляheightи всё должно быть в порядке.И ещё, увеличьте ширину окна примерно до 400px, тогда фон уведомлений об ошибках при заполнении форм не буде наезжать на края окна и всё будет выглядеть эстетичней:
<div class=”popup” style=”width:400px; height:auto;”>
<div class=”popup” style=”width:400px; height:auto;”>
Проделайте это для всех используемых у вас на сайте модальных окон содержащих форму заказа.
Удачи!
Спасибо за ответ, но когда я делаю height auto, у меня попап не умещается на страницу и получается, что информация в конце все равно не доступна и выглядит не эстетично, т.к. попап обрезанный получается. Что с этим можно сделать?
Здравствуйте автор статьи driver!
У меня к вам вопрос, и просьба о помощи в одном лице)
Хотелось бы прикрутить регистрацию/восстановление пароля к такому виду всплывающего окна на wordpress. Прикрутил авторизацию самостоятельно, а вот на регистрацию и восстановление (+сообщения о неверности заполнения данных) знаний не хватает. =(
Пожалуйста, помогите!
Максим, здравствуйте.
Обратите внимание на новый плагин jQuery адаптивных форм регистрации и входа. Готовые формы с валидатором полей ввода, остаётся лишь правильно эти формы связать с функциями wp. Существуют и специальные плагины для WP, например SimpleModal Login, который добавляет всплывающую форму регистрации на WP-сайт. А мои окна, лучше всё же использовать, как информационный контейнер.
Весьма благодарен. Думаю такой вариант, будет действительно эффективнее.)
А как поменять название заголовка в окне поделиться,например в twitter, вместо «Что нового?» написать «Поделиться ссылкой с читателями» ?
У меня вот такой код,где тут и как можно переименовать?
Дмитрий, я ничего не понял? )))
Напишите код, выделите и нажмите кнопочку «код» над текстовым полем комментирования.
У вас на сайте к примеру кнопка twitter,там заголовок «Поделиться ссылкой с читателями» вместо «что нового?» как можно изменить этот заголовок?
Вот код,может он не правильный,но окно открывается со своим текстом,просто заголовок хотелось бы изменить,как у вас на сайте
Попробую догадаться, я так понял вас интересует подсказка к ссылке, если оно так, то просто замените текст в атрибуте
titleна свой, если титул у вас отсутствует в ссылке, то добавьте. Для просмотра наведите на ссылку ниже:Ссылка
<a href=”http://twitter.com/dobrovoi” title=”Это пример ссылки ведущей в мой twitter. Сюда и пишите всё что вам нужно” rel=”nofollow”>Ссылка</a>
<a href=”http://twitter.com/dobrovoi” title=”Это пример ссылки ведущей в мой twitter. Сюда и пишите всё что вам нужно” rel=”nofollow”>Ссылка</a>
Нет,не ссылка а заголовок,посмотрите на фото,скриншот: mepic.ru/view/?id=9f3c62d…50ee2de73d5d7443
У меня написано там «Что нового?» а хотелось бы изменить на «Поделиться ссылкой с читателями»как у вас.
Скриншот моего кода: joxi.ru/8AnXRX7Fq491mO
Понятно,))) это виджет кнопка от twitter, настраивается здесь, правда я не уверен, что вы сможете изменить там заголовок всплывающего окна при отправке твитта.
Добрый день driver))) Вот незадача(((
Поставила ваше окно (CMC Joomla) Встало, появляется, но вот никак не могу понять почему оно прокручивается. Видна только часть окна. Пыталась поменять CSS? но результата нет. Посмотрите пожалуйста terraelectronic.ru (сайт в разработке)
Страница в верхнем меню -Доставка. Внизу несколько кнопок — ЗДЕСЬ и Открыть окно1.
Спасибо!
Доброго времени суток, Марина.
В окно вы помещает большой объём информации, блок растягивается и выглядит не очень эстетично. Исправить это можно задав фиксированный размер высоты окна, например
height: 500px;и добавить полосу прокрутки.Поместите все содержание внутри модального окна в дополнительный
div-контейнер, всё кроме кнопки закрытия, получится должно следующее:<div class=”popup”>
<div>
Сюда размещаете любое содержание, картинки, текст, и т.д….
</div>
<a class=”close” title=”Закрыть” href=”#close” rel=”nofollow”></a>
</div>
<div class=”popup”>
<div>
Сюда размещаете любое содержание, картинки, текст, и т.д….
</div>
<a class=”close” title=”Закрыть” href=”#close” rel=”nofollow”></a>
</div>
Далее вам нужно в CSS найти следующие селекторы:
.popup p, .popup div {
margin-bottom: 10px;
}
.popup p, .popup div {
margin-bottom: 10px;
}
Развести их, чтобы параграф
pи блокdivне дублировали свойства, и добавить полосу прокрутки для блокаdiv, а также выставить нужную вам высоту этого блока, должно получиться следующее:.popup p{
margin-bottom: 10px;
}
.popup div {
overflow:auto;
height: 500px;
}
.popup p{
margin-bottom: 10px;
}
.popup div {
overflow:auto;
height: 500px;
}
Как понимаете, значение у высоты
height: 500px;я указал лишь в качестве примера, вы можете выбрать любое другое, главное чтобы окно выглядело пропорционально.При увеличении высоты окна, так же можете поэкспериментировать с позицией появления, по умолчанию у меня выставлено значение 20% от верха страницы
top:20%;.overlay:target+.popup {
top: 20%; /* отступ от верха при появлении */
visibility: visible;
opacity: 1;
}
.overlay:target+.popup {
top: 20%; /* отступ от верха при появлении */
visibility: visible;
opacity: 1;
}
Надеюсь всё у вас получится.
Доброй ночи! Сделала все по вашей рекомендации. Ничего! Окно зафиксировано и с места ни-ни. Может быть я не внятно выражаюсь((( Как я понимаю окно должно прокручиваться а страница под ним — нет. Всего текста все-равно не видно.
Туплю(((
Может где еще надо стили поменять.
Только на это ваше окошка надежда. Так как, на скриптах окно не работает. Почему — не знаю. Да и Fancybox тоже не работает. Уже кучу инфы перелопатила и никак не выходит.
Спасибо! Вы мне уже не первый раз помогаете)))
Марина, это наверное я вас не понял, мы с вами сделали так чтобы всё содержимое умещалось в окне фиксированных размеров, добавили полосу прокрутки. Вам же видимо нужно, чтобы всё содержимое окна было на виду, а окно имело возможность прокручиваться вместе с содержимым страницы. Проделать это просто, достаточно изменить позиционирование окна с фиксированного
position: fixed; на абсолютноеposition: absolute;, но тогда возникает другое препятствие для пользователей, если пользователь активирует окно находясь внизу страницы, он увидит нижнюю часть содержимого окна. Тем более вы разместили модальное окно внутри контейнера с контентом, надёжнее всё же вынести его за пределы базового контейнера(у вас это:<div id="back">) и подкорректировать значения позиционирования. А ещё лучше, конечно только на мой взгляд, оставить всё так как сейчас, т.е. модальное окно с полосой прокрутки, компактно, не отпугивает пользователя, и тем кому оно надо, воспользуются прокруткой. Всё познаётся в сравнении, попробуйте сменить позиционирование и всё поймете.Хотелось бы просто выразить БОЛЬШУЮ благодарность driver. Подписан на всё переписывание рубрики. Всегда интересно почитать и воспользоваться советами. И всегда не откажет driver в помощи. Ещё раз спасибо.
Добрый день! Ставила absolute;, все получилось. Но буду экспериментировать с css.
Спасибо вам. Знаю, что вы всегда на связи)))
Не джумла, а песня души))) Допилила. Теперь окно исчезает не сразу))))))))))))
Зацените пожалуйста, может ошибки где еще увидите terraelectronic.ru/dostavka Спасибо!
Рад за вас))
Отпустите форму чуточку ниже, задайте не 2 а хотя бы 10% от верха, и у свойства z-index измените значение с 10 на 99999, иначе окно перекрывается формой поиска в самой верхней позиции.
Да, и всё таки уберите
width: 100%;из раздела.popup, тогда при уменьшении экрана, окно будет изменяться более корректно.Спасибо большое driver!
Доброго времени суток. Такой вопрос. Станет ли все это на сайт на php? Ну и для пробы поставил на html пошло в чем ошибка. Код прилогается
<a href=”#win1″ rel=”nofollow”></a>
<!– Вызов окна через миниатюру изображения –>
<a href=”#win5″ rel=”nofollow”></a>
<!– Модальное окно №1 –>
<a href=”#x” rel=”nofollow”></a>
<a href=”#win1″ rel=”nofollow”></a>
<!– Вызов окна через миниатюру изображения –>
<a href=”#win5″ rel=”nofollow”></a>
<!– Модальное окно №1 –>
<a href=”#x” rel=”nofollow”></a>
Здравствуйте,
Если не сложно, подскажите пожалуйста,
как грамотно исправить позицию появления окна?
laplandcamp*com/zimavesna.php
файл со стилями style.css лежит в корне
Изображение помещается не полностью.
Вадим. Здравствуйте.
У вас окна выводятся относительно блока с содержанием div class=”art-content-layout-row” и отступ от «топа» у вас выставлен на 0px, соответственно окно и выводится относительно блока в котором расположено. Самый простой способ, отрегулировать с помощью значения свойства top в стилях окна .popup, например выставьте минусовое значение -60px или -80px. Не самое красивое решение, но рабочее, лучше конечно вынести блоки с содержанием модальных окон в район перед footer и посмотреть как будет работать, конечно не забывать при этом о значении top, регулируя его в ту или иную сторону. Выносите только дивы .popup, ссылки же на вызов окошек оставляйте там где они у вас положены.
Здравствуйте, Александр.
А чем по вашему отличается формирование стилей на сайтах php? Вся работа окон построена на css, остается правильно прописать html-каркас там где это вам необходимо.
Для вставки сода в комментаримй воспользуйтесь кнопой «код», первый клик открывает а второй соответственно закрывает)))
Я немного в этом деле профан. Не могли бы вы мне подсказать как правильно прописать код на две картинки. Вот код
Для вставки кода в комментарий, существует кнопочка волшебная под названием «Код», прямо перед глазами, а так же, перед отправкой коммента, можете проверить что получится, нажав ещё одну кнопочку, не менее волшебную, под названием «Предпросмотр»
Увижу ваш код, обязательно помогу, а так, я не волшебник, кнопки, вот они волшебные))))
Вот наконец вставился. Как правильно прописать две картинки?
<p style="text-align: justify;"><strong style="box-sizing: border-box; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px;"><img src="../photos/text/zamovutu-poslugu-advokata.jpg" alt="" width="333" height="40" /> <img src="../photos/text/2.jpg" alt="" width="333" height="40" /></strong></p><script type="text/javascript" src="../share42.js"></script>
Вставился))) И что мне с ним делать? Что в конце концов вас интересует то? Вижу два файла изображения, за каким то лешим, обнесённые тегом
<strong>, вижу скрипт шары от димокса. Тупо не врублюсь никак, что вы хотите то и причем здесь модальное окно? Вы хотите чтобы одна картинка открывалась в модальном окне, по клику на другую или ЧЁ-о?Урок ниочем. Те, кто смогут в этом разобраться — смогут и сами это сделать без подсказок. А для новичка с этого урока помощи ровно ноль.
В чём проблема то? Не читайте раз не интересно. Или предложите своё решение, а так, много вас таких оценщиков распальцованных бродит.
Кто сможет разобраться конечно разберутся, кто бы спорил. А для новичков полный расклад и html и css, а если возникают вопросы, они их задают в комментариях и получают нужные разъяснения.
Меня всегда интересует вопрос, чем такие как вы руководствуетесь. Ни какой конструктивной критики или указаний на ошибки, ни каких интересный идей в комментах, а только элементарный высер. Нужно хотя бы пытаться иногда уважать чужой труд…
У меня всё!
Спасибо огромное!!Все прекрасно работает!
Рад, что у вас всё получилось.
Здравствуйте, окно появляется под меню на сайте…
Как исправить?
И как сделать, что бы оно автоматически закрывалось после нажатия на кнопку отправить.
Окно используется для заказа обратного звонка.
Попробую на уровне телепатии.
Если ваша кнопка используется, как самостоятельная единица, а не как элемент формы, то попробуйте закрыть окно через событие
onclick="document.location.reload()"добавив его к тегу вашей кнопки input или button (от сюда просто не вижу…) В этом случае соответственно будет происходить перезагрузка страницы, следовательно метод неочень, но работает, проверьте отправку данных при этом.Окно всплывает под меню
Если имеется ввиду, что меню сайта накладывается на окошко, то скорее всего смотрите значения свойства z-index, в css примера выставлены от фонаря, так как особой надобности в регулировках небыло. Увеличьте значения, для .overlay и .popup, например:
z-index: 9999; и z-index: 10000;
Гадать — занятие трудное, да и чаще всего мимо )))
Здравствуйте. Подскажите, а в какую папку закинуть скаченный фаил style?
Здравствуйте, Татьяна.
Если вы собираетесь использовать окна на готовом сайте, то у вас уже есть файл стилей, весь style.css примера вам не нужен, а только кусок после комментария
/* Базовые стили модального окна */до@media only.... Копируете правила и вставляете в свой файл стилей, у вас он здесь: /templates/HotGirls/css/style.css.Желательно всё это проделывать на локалке, для тестирования, а судя по вашему вопросу, на работающем сайте сами не экспериментируйте всё же.
А вы не могли бы мне помочь? ))) Я в этом мало чего понимаю. Понравилось как сделали на этом сайте http://www.igratvonline.ru/brodilki/…lt-course-2.html если кликнуть по большой картинке откроется игра. Вот тоже так хочу. Может я вам скину фаил style, а вы мне его подредактируете? И какой код мне нужен, чтоб при клике на картинку открылась игра?
На сайте, что вы привели в пример, используется плагин Fancybox, игры выводятся через iframe, почему бы вам не воспользоваться этим плагином…
В окна которые описаны в моей статье, тоже можно вставить подгружаемое содержание iframe, но это же сколько нужно перелапатить у вас на сайте, так что извините, но в примере всё четко и предельно ясно расписано и показано куда и что, так же имеется пример активации модальных окон с помощью миниатюры, исходный код как на ладони. Если вы не знаете, как совладать с минимум кода css, ещё раз повторюсь, обратитесь к спецу, предоставив ему доступ к админчасти вашего сайта. А одним подредактированием файла style.css, здесь ничего не решишь.
В качестве наводки:
У вас игры в виде фрейма встроены в
<div class="player"><div>и выводятся на странице игры, ваши действия такие:На странице игры выводите картинку с кнопками «играть», делаете и картинку и кнопку ссылкой на вызов модального окна, в которое и встраиваете div class=”player” со всем, содержимым, размеры окна подкорректируете по необходимости в свойствах max-width класса .popup
Картинка в виде ссылки на вызов она будет примерно такой:
<a href="#win1" rel="nofollow"><img src="папка_с_картинками/картинка_игры.jpg" title="Заголовок"></a>атрибут ссылки #win1 должен соответствовать id каждого окна и так с каждой игрой
Всё это если вкратце, теперь зацените объём работы и задайте вопрос, а оно того стоит?
Здарвствуйте, у меня такая проблема. Установил всплывающее окно, все работает. Как только подключаю язык jquery, всплывающее окно оккрывается а вот закрыть не получается, подскажите пожалуйста что делать?
Если быть точнее, то конкретно я подключаю скрипт jquery для плавной прокрутки, называется он ScrollTo.
Здравствуйте.
Даже представить не берусь, окна написаны на чистом CSS, js никак на них не должны влиять, если только не конфликтуют адрес ссылки закрытия
href="#close"и обработчик скролинга, так как в обоих случаях используется#, попробуйте для начала оставить якорь ссылки пустым(что не есть правильно, по ряду причин), так хотя бы выявите причину. Далее нужно будет уже прикручивать события js и т.д. а это уже другая история, легче модальное окошко на jQuery забабахать тогда))))$(function () {
$(‘a[href*=#]:not ([href=#])’).click (function () {
if (location.pathname.replace (/^\//,”) == this.pathname.replace (/^\//,”) && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $(‘[name=’ + this.hash.slice(1) +’]’);
if (target.length) {
$(‘html,body’).animate ({
scrollTop: target.offset ().top
}, 1000);
return false;
}
}
});
});
Нужно поставить :not ([href=#]), тогда будет всё отлично работать.
Спасибо за своевременное и оч. нужное дополнение))
При загрузке страницы видно div с инфой долюсекунды , если подключена Jquery то всё ок .
И как это вы только усмотрели ))). Хотелось бы посмотреть, да боюсь я не узрею. А по существу, всё логично, для скрытия мод. окошка используется связка
visibilityиopacity, от второго можно отказаться и посмотреть что получится в итоге. На каком этапе может быть задержка и как влияет подключение jQuery, для меня загадка, которую решать нет особой необходимости, потому как не критично, да и задержки могут происходить ведь исключительно на вашей стороне. Но все же спасибо, возьму на заметку и протестирую ещё раз по-полной.Аналогично «При загрузке страницы видно div с инфой долю секунды»
Просто уберите или уменьшите задержку перехода
transition: all ease .5s;и все! Да и хотелось бы чтобы вы уточнили в каком браузере наблюдается сея трабла))) буду разбиратьсяFF34, win8.1, буду пробовать
Подскажите, пожалуйста, как сделать всплывающее окно при первом посещении сайта. Спасибо.
Извините, уже нашел dbmast.ru/sozdaem-vsplyva…mnogo-javascript
Спасибо за статью!
Решил попробоватьЮ дабы разобраться с мехагизмом детально.
Работает, но на странице, где тестил, есть меню и оно при проходе мыши по popup окну просвечивает с возможностью клика.
Вопрос простой: почуму такой эффект и как избавиться от него?
Решил проблему: z-index…
Но есть ещё одна:
как передать текст в попап окно?
Понимаю, что вопрос «неуместен» м многие обычно посылают … к документации. Но почему-то архи сложно понять принципы взаимодействия html и js, отсюда и вопрос.
У на так всегда, сначала задаём вопрос, потом сами же на него и находим ответ))
Второй вопрос что то не догоняю, в смысле: как передать текст в попап окно? Чаще всего это делается руками, в редакторе, а принципы работы js и html в один коммент сложно будет уложить)))
Добрый день, мне понравилось демо версия, хотел бы сделать себе на сайт, но не знаю как проработать его в ОПЕНКАРТЕ?, подскажите пожалуйста…
у вас так:
<a href="#win1" class="button button-green">Открыть окно 1</a>как открыть из JavaScript?
Такой же вопрос: из какого javascript?
<script>function openPopUp(){
// здесь нужно открыть всплывающее окно
}
</script>
спасибо
Это то всё понятно, не понятно к чему вы хотите привязать функцию, т.е. окно открывается по удару на кнопке/ссылке, или же всплывает самопроизвольно с некоторой задержкой при загрузке страницы, какой вам нужен функционал в итоге? Подгружать в диалоговом окне страницу html, или же формировать содержимое с помощью js? Вариантов масса, помочь вам разобраться готов, строить догадки по поводу ваших идей — нет.
Приведу один пример:
При клике на ссыль/кнопу, открывается диалоговое окно с содержанием существующей html-страницы:
function openPopUp(url) {
newwindow=window.open(url,’name’,’height=450,width=500′);
if (window.focus) {newwindow.focus()}
return false;
}
В ссылке указываем адрес страницы и через событие
onclickотдаём её в js:<a href="страница.html" onclick="return openPopUp('страница.html')">Открыть Окно</a>В этом случае откроется стандартное диалоговое окно браузера(с тулбаром и меню), размером 500px на 450px, в котором будет выведено содержимое страницы
.htmlТакже можно сформировать содержимое окна непосредственно с помощью javascript.
Ок. Поясню свою задачу. Имеется таблица, в ней данные. Для каждой строки таблицы имеются кнопки (button), которые удаляют либо редактируют данные (запись) в таблице. При нажатии кнопки «Редактировать» должно показываться всплывающее окно, в котором данные записи редактируются, при нажатии в этом окне «Сохранить» а) через DOM обновляются данные в таблице б) форма с измененными данными отправляется через ajax на сервер.
Соответственно window.open не подходит, т.к. необходимо изменять содержимое DOM текущего окна. Ваш вариант всплывающего окна CSS как раз для этого случая удобен.
Можно конечно вместо button использовать ссылки, но этот вариант мне не кажется правильным (стараюсь не использовать варианты подобные href=”#”, т.к. ссылки должны содержать URL, по которому ссылку можно открыть например в новом окне).
Таким образом, меня интересует каким образом, можно из кода JS показать окно CSS из Вашего примера.
Огромное человеческое СПАСИБО за статью!!!!!!!
Конечно пришлось долго копатья, чтобы дойти до сути, но это стоило того!!!! Да здравствуют всплывающие окна на чистом css!!! Да здравствует Андрей doborovoi!!! Ура товарищи!!! *смайлик с флажками*
=D
Спасибо, Алиска, повеселили))) Только всё же не стоит забывать, что метод не лишён недостатков, свистопляски с кроссбраузерностью, мобильные устройства опять же вносят свои коррективы
Здравствуйте, у меня такая проблема, поставил код на текст в меню. То есть хочу, чтобы при нажатии на текст «Контакты» выскакивало окно.
Все настроил все работает, но только когда нажимаю на контакты то есть http://www.сайт.ру/win1 ничего не происходит, а если обновляю страницу по этому адресу то окно появляется.
Здравствуйте.
Просто уберите из ссылки адрес сайта, оставьте только идентификатор
#win1Получится следующее:
<a href="#win1">Контакты</a>И всё будет хорошо)))
Так и стоит, но все равно не работает.
Спасибо за полезную статью. Подскажите, можно ли сделать чтобы при повторном открытии модального окна, видео в нем начало проигрываться сначала, а не с того места на котором остановилось в предыдущий раз?
По идее, если делали всё как в демо, видео должно проигрываться сначала, так как закрытие окна с видеороликом реализовано посредством перезагрузки страницы, что не очень хорошо, но другого решения, без подключения js, у меня пока нет
Здравствуйте! Не подскажете ли, почему всплывающее окно , а точнее затемнение, не распространяется на input поиска? (opencart 2.0). по ссылке прикрепил скриншот)
z-index ставил, ничего не меняется. сможете помочь?)
Здравствуйте, Анатолий.
Всё что вижу по скрину(пытаюсь догадаться), это input поиска наслаивающийся на фон затемнения, однозначно баг с z-index. Увеличьте значение по максимуму, например у фона сделайте:
z-index: 9999;, а у модального блока:z-index: 10000;. Так же посмотрите у формы поиска, это свойство вообще присутствует или нет, обратите внимание и на!important.Истина где то рядом, только вот я не телепат, извините)))
Спасибо!, все работает. Пчмт думал, что диапазон значений z-index всего сотня)
А как сделать, что бы окно выплывало автоматически, через определенное время (к примеру через 15 секунд), и что бы в окне отображалась форма обратной связи? Я совершенно неопытный, по этому, буду признателен, за максимально подробную и полную информацию)))
По этой теме у меня есть отдельный урок, посмотрите и всё поймёте: Тынц
Огромнейшее спасибо! Я хоть и не соображаю ничего в CSS, а сайт пишу по учебнику HTML, разобрался, и за пол часа сделал именно то, что хотел! Спасибо!!!
спасибо, отличная статья, помогла
подскажите, как мне можно закрыть модальное окно и убрать затемнение не нажимая на кнопку закрыть или куда-нибудь вне окна? У меня внутри модального окна форма и я хочу после успешной отправки данных закрыть окно и убрать затемнение
я так понимаю все дело в стилях, но если сделать что-нибудь вроде — document.getElementById (‘win1′).style.display=’none’; и т.д, то при следующей попытке открыть это же окно, оно уже не будет показано, т.к. display=’none’, вот хотелось бы реализовать такое же поведение, как если бы я нажал закрыть модальное окно.
а, все, вопрос исчерпан, извините)
Не подскажите, как содержимое это всплывающего окна можно отправить на печать?
Выделить, ударить правой кнопой и нажать слово «Печать» ))
А серьёзно? Это открывшееся окно вообще на печать не выводится.
Здравствуйте!
В вашем примере окно всплывает по ссылке
<a href="#win1" class="button button-green">Открыть окно 1</a>как открыть по кнопке, событие onclick?
<INPUT TYPE=submit id="" class="button_1_1" NAME="enter" VALUE="Вход" onclick="">Всем привет, и спасибо за прекрасную статью! Я не пойму как сделать так чтобы окно вылазило когда хотят закрыть страницу не подскажите?
Косяк был обнаружен при выводе изображений. В общем окно уезжает за пределы экрана. Решил просто, поставив вместо 20% отступа — 5%. Но скорее всего, тут проблема в моем 15.6 экране. Думаю, надо будет предусмотреть просто изменение формата изображения в зависимости от экрана. Да, еще один момент. Всплывающие окошки шикарно работают на мобильных устройствах. За это огромное спасибо.
Здраствуйте а как зделать тоже самое только если ссылка вела на другой html, а не в этот же
Здравствуйте.
Используйте внутри модального окна фрейм с любой страницы и всё.
большое человеческое спасибо. правда я уже java skript научился использовать. но и ваш пример я тоже вставлю в свой сайт.
Огромное человеческое спасибо!!!
не понял только одного момента (уж простите)
кликая на кнопку вызова окна мы вызываем ссылку с соответствующим ай-ди
а за ним уже идет див с содержимым окна…
чем обусловлена эта ссылка?
нельзя ли на прямую к диву?
Ссылка в данном случае выполняет роль фона затемнения и является связующим звеном с модальным блоком, можно конечно обратиться и на прямую к диву, поэкспериментируйте и вы увидите, что это совсем другая история.
спасибо
.close:hover добавил text-decoration:none; теперь на мой взгляд лучше смотрится, Х без подчеркивания. А сам материал большое спасибо эффект афигенный, представляю ваш труд. И отдельное спасибо за кнопку Закрыть. Респект!
Thanks! 😉
Огромное спасибо! Окна простые в реализации и отлично смотрятся!
Спасибо
Спасибо за пример. Однако я совсем не пойму каким образом происходит взаимодействие с div’ом. В ссылке нет на него никаких указаний. Выбирается первый div после ссылки. href=”#x” зачем нужен? и без него все работает? Можете подробнее объяснить что происходит, что и где вызывается и в какой последовательности.
Взаимодействие с div’ом прописано на стороне css,
.overlay:target+.popupА на счёт
href="#x"всё просто, считается, что пустой якорьhref="#"не совсем «кошерно», да и при переходе прокручивает вверх страницу, если много контента.Можете совсем отказаться от ссылки, использовав всё тот же div с определенным CSS стилем, но тогда закрытие окна возможно будет только по клику на кнопке закрытия. Конечно, станцевав с бубнами и эту задачку можно решить, только вот нужно ли.
Здравствуйте, сделал как у вас, однако кнопка закрытия не работает, вообще никак не закрыть окно, соответственно возникает проблема. Прошу помочь, возможно где-то что-то пропустил.
Здравствуйте, тёзка.
Если бы вы сделали именно так как у меня, всё бы работало, уж поверьте. Этому решению уже 3 года и за это время его раздербанивали на части, ковыряли код все кому не лень. Совместными усилиями было выявлено и исправлено ряд ошибок.
Это всего лишь предложенный мной, ещё один оригинальный вариант, как им воспользуются люди в дальнейшем, я просто не в силах предугадать, тем более не видя, что и как человече проделывает с исходниками.
Всё ведь очень просто. Берёте исходный код html и css, интегрируете в свой проект, при возникновении проблемы, описываете ёё как можно подробнее и я вам обязательно помогу. Очень часто ответ на свой вопрос можно найти в ранних комментариях, только кому оно надо читать какие-то комменты.
Могу конечно ошибаться, но кажется вам следует взглянуть на один из комментов: Тынц
Если вы используете у себя на сайте скрипт jquery для плавной прокрутки, конфликт возникнуть мог именно с ним. NeedHate дал по этому поводу исчерпывающие рекомендации.
Спасибо, разобрался в проблеме. Все дело было в невнимательности =)
Добрый день.
Примеры — классные! В конечном итоге более впечатляют, чем на JS. Использовал пример с IFRAME. Заморочка с прозрачностью: где выставить параметры iframe, чтобы бэкграунд был от попап дива (div)? В iframe allowtransparency прописал, но эффекта нет. И не могу сообразить как прописать закрытие окна из содержимого iframe, по поиску только примеры с JS, если вопрос понятен, прошу помощи.
Здравствуйте, Максим.
В селекторе
.popup iframeпропишитеbackgroundс нужным вам цветом. Если нужен прозрачный фон то используйтеbackground-color:transparent, inheritнаследует значения родителя, или же заливку в rgba, степень прозрачности регулируете последним значением, например при
background: rgba(0, 0, 0, 0);, по идее, фон должен стать абсолютно прозрачным и будет соответствовать заливке дива попап.Что качается второго вопроса, даже как-то и не задумывался при написании статьи о таком функционале. Думается мне, что 100% рабочего решения на чистом css просто нет.
Спасибо
Добрый день. А как можно передать параметры с основного окна в модальное окно?
?per2=$per1 в ссылке не работает.
т.е. у меня есть набор ссылок напротив каждого из товаров. И при нажатии на ссылку всплывает ваше окошко. Но я не знаю как предать в это окошко значение переменной — кода товара, напротив которого размещена ссылка.
Вышел из ситуации так: части названия окна присваиваю значение переменной и в код модального окна её уже передаю.
Добрый день!
Спасибо за замечательное окошко!
Не подскажете, у меня следующая ситуация:
В модальном окне у меня стоит кнопка, которая отправляет данные формы, расположенной в основном окне, выглядит так:
Однако, если данные, введенные в основном окне не верны (там стоит КАПЧА) — основное окно перезагружается, но вместе с ним снова выводится и модальное.
Как сделать, чтобы модальное снова не выводилось в такой ситуации, после нажатия кнопки SEND?
СПАСИБО БОЛЬШОЕ! ВЫ БОГИ!
Почему-то не работает с Firefox и IE
В Firefox всё прекрасно работает, в IE начиная с 9-й версии. Так как эта тема является одной из самых популярных в блоге, постоянно проверяю работу данного решения. Так что…
Что может быть не так? У меня работает только в Хроме
Здравствуйте. Хочу установить кнопки, как у Вас на демо. Но они через HTML не идут. Как их через гаджет установить. Извините, но еще не умею с кодами работать. Подскажите.
Здравствуйте, Вячеслав.
Набор кнопок CSS3 смотрите и забираете здесь. В статье я подробно рассказываю, как их использовать. Относительно применения в шаблонах Blogger, всё по накатанной, набор правил css кнопок, вставляете в режиме редактирования шаблона, в раздел
<b:skin><![CDATA[ ... ]]></b:skin>, лучше всего перед тегом]]></b:skin>, чтоб не потеряться в дальнейшем, сохраняете изменения и всё, остается только в гаджете разместить ссылку с классом соответствующим той или иной кнопке, например, для зелёной кнопы:<a href="#" class="button button-green">Кнопка</a>В атрибуте
href="#"указываете нужный вам адрес, или если для вызова модального окна, идентификатор окошка. Всё!Спасибо большое. Доходчиво и понятно. Ну очень приятно что нашел Ваш сайт.Успехов.
Имеем: страницу на сайте со множеством ссылок. При нажатии некоторых ссылок используется вышеприведенное модальное окно. Так как ссылок много — модальных окон тоже может быть множество (десятки, а то и сотни).
Задача: для того, чтобы не захламлять страницу кодом множества модальных окон можно ли код:
<!-- Модальное окно №2 --><a href="#x" rel="nofollow"></a>
Здесь вы можете разместить любое содержание, текст с картинками или видео!
<a title="Закрыть" href="#close" rel="nofollow"></a>
хранить в отдельном .html откуда бы он подтягивался на основную страницу только при необходимости.
Как это можно сделать на практике?
Модальное окно в таком виде, как в примере, это всего лишь один div-контейнер. Даже если будет сотня таких блоков, особого захламления, как вы выразились, я не вижу.
Я о том, что при наличии допустим сотни модальных окон размер страницы будет ~1 мб, что приведет к задержке ее загрузки при медленном инете.
Здравствуйте, есть страница-анкета с полями для заполнения. Как сделать, чтобы при нажатии на кнопку отправить одновременно:
1 — анкетные данные отправлялись на емайл и;
2 — появлялось модальное окно с текстом.
А как сделать так, чтобы номер картинки менялся? я делаю фото-галерею
Каждое модальное окно ( точнее overlay ) имеет уникальный id, который соответствует адресу ссылки активации окна, в галереях это чаще всего миниатюры изображений.
Миниатюра:
<a href="#img-1"><img title="" src="img/ваша_картинка.jpg" width="150" height="150" alt=""></a>И модальное окно с реальным изображением:
<a href="#x" class="overlay" id="img-1"></a><div class="popup">
<img class="is-image" title="" src="img/ваша_картинка.jpg" alt="">
<a class="close" title="Закрыть" href="#close"></a>
</div>
Каждой последующей картинке(миниатюре в ссылке) прописываете адрес соответствующий id мод.окна с полноразмерным изображением
То есть для каждой картинки нужно делать своё модальное окно?
Спасибо вам большое!!! Мне очень помог ваш урок)
pp.vk.me/c629320/v6293207…/s4gwsW82fwM.jpg
только теперь ещё один вопрос: как «поднять» наверх окно? чтобы оно было по центру окна
почему-то при изменении Top, окно не поднимается выше
.popup {
position: fixed;
top: 100px;
right: 0;
left: 50%;
bottom: inherit;
font-size: 14px;
z-index: 20;
margin: 0;
width: 85%;
max-width: 832px;
В селекторе
.popupмы прячем окно за верхнюю границуtop: -100px;, менять здесь ничего не надо))При клике изменяем расположение появляющегося окна с трансформацией
.overlay:target+.popup {-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
-o-transform: translate(-50%, 0);
transform: translate(-50%, 0);
top: 20%;
}
Именно здесь и следует регулировать отступ от верхнего края ( по умолчанию
top: 20%;), просто выставьте нужное вам значение.сначала хочется сказать огромное спасибо за ваши труды ради нас) а можно подробнее о том как работает механизм закрытия окна? я просто понять не могу где описано действие которое должно произойти при нажатии на «#close»
Сие действие нигде не описано, так как действием и не является,
#closeв адресе ссылки кнопки закрытия, конечно не совсем кошерное решение, но использовал его для общего понимания, ну и чтобы при закрытии не бросало на верх, если мод.окно выводится на странице с большим объёмом контента. Существуют и другие варианты, с точки зрения валидности, может и более правильные, но это уже совсем другая история…Обратите внимание на окно с видео, в поисках способа остановки проигрывания видеоролика при закрытии окна, использовал событие
onclickтупо вызывающее перезагрузку страницы, более оптимального решения, у меня пока нет.В любом случае Вы молодец раз занимаетесь написанием и главное поддержкой статей для совсем неопытных. при изменении позиционирования окна по центру начало «выплывать» с правого нижнего угла))) а «уходить» в левый верхний))). но это мелочи, Вы кучу времени не мне одному сэкономили!
Спасибо большое!!!)
Прошу прощения, Вы не могли бы подсказать, как использовать pic-left/-right для решения навигации в галерее? Я так понимаю, будет открываться основное фото, а по бокам в уменьшенном варианте предыдущее и последующее. Так вот, как бы куда это правильно вписать?..
P.S.: понимаю, что напрягаю Вас, но я нуб и не спрашивал бы, если б разбирался.((
Нет Андрей, вы не правильно поняли, классы
pic-leftиpic-right, прописал для использования миниатюр изображений в теле модального окна, с левым и правым позиционированием относительно текста соответственно. Дляiframeи встроенного видео в модальное окно, так же определены правила. А на счёт галереи, вам лучше перелопатить другие мои обзоры: тынц >>спасибо))
Здравствуйте!
Вот у меня проблема возникла с миниатюрой №5. Будто все делал по вашему коду, но дело в том, что я ставлю вторую картинку, а в сплывающем окне выходит предыдущая картинка, то есть та, что я помещал в первой миниатюре. Уже все пересмотрел и перипробывал, но проблема не решается.
Копайте в сторону идентификаторов, у каждого окна свой id соответствующий ссылке на вызов окна, т.е. если в ссылке
href="#win1", то и у модального окнаid="win1", точнее у фона затемнения в виде ссылки, который в свою очередь связан с блоком модального окна через псевдокласс :target в cssСпасибо. И действительно. Вот это я протупил.
Картинка становится большой из-за вот этого кода в css
/* изображения внутри окна */.popup img {
width: 100%;
height: auto;
}
Если картинками будете управлять по другому, просто уберите этот кусок
Да, Денис, спасибо!
Этот момент я понял. Убирать совсем не стал — изменил размер.
Вот многие уже говорили, а теперь и у меня проблема со скроллингом. Текст нужный большой, а прокрутка по человечески не работает.
Народ, если кто придумает, напишите плиз!
Давайте вместе доработаем этот супер попап! 🙂
А что тут дорабатывать? По поводу полосы прокрутки писал в комментах не раз Тынц
Видео блок работает, но при выключении видео вне блока, просмотр прекращается, а звук продолжает воспроизводиться… Помогите.
Спасибо.
Самое простое, это оставить адрес ссылки выполняющей роль фона затемнения и связующего звена с модальным окном, оставить пустым:
<a href="/" class="overlay" id="win3"></a>Конечно, это не самое кошерное решение и многие навороченные веб-мастера содрогнутся, но решение работает))).
Спасибо большое, помогло.
А есть вариант такой, чтоб видео включалось автоматически. Я начинающий, буду благодарен за помощь.
Уже не первый раз читаю твою инфу, все просто и доступно написано, спасибо огромное за исходники, побольше бы таких статей, здоровья тебе, сил, всех благ, и достижению поставленных целей!!!
Денис, спасибо за отзыв.
Вопрос, пробую вставить табы в это окно и столкнулся с проблемой, при нажатии на один из табов окно само закрывается , как же сделать так, что бы при нажатии на таб в модульном окне открывалась разная информация и закрытия не происходило
Не знаю, какие вкладки вы используете, например мои табы отлично вписываются и работают в модальном окне. Такое поведение (закрытие мод. окна) возможно при использовании вкладок в виде ссылок с атрибутом
href="#", так как работа (активация) окон построена на использование псевдокласса:targetСпасибо , попробую по другому 🙂
Добрый день! Очень понравилась эта тема. Сейчас как раз верстаю сайт, но делаю это на компе и просматриваю страницы в браузере. Скопировал Ваш код, разместил в корневой папке файлы css. Сначала всё работало, но потом перестала работать кнопка закрытия окна (крестик). А когда закрываешь видео, отправляет на страницу «страница не найдена». Под видео поставил кнопку закрытия с помощью . Сначала всё работало, но потом снова перестала откликаться кнопка закрытия на всех окнах. Подозреваю, что на хостинге всё будет работать. Но спешу уточнить, так ли это, и что делаю не правильно…
Доброго времени!
Начну с того, что данное решение должно работать на локалке без проблем. При закрытии окна с видео, перебрасывало на отсутствующую страницу потому, что в демо, в кнопке закрытия использовал ссылку с адресом
href="demo.html", дабы не прописывать пустую ссылку, такое вот кривоватенькое решение(тупо перезагрузка), для принудительной остановки проигрывания видео, другого, на чистом css, у меня (да и ни у кого) просто нет.По поводу не срабатывания кнопки, посмотрите, а не прописали ли вы в ссылку событие
onclick="return false", которое используется в демке, в окне с видеороликом, для отмены перехода по ссылке.Якорь
#closeприменяем для того, чтобы при закрытии не кидало вверх страницы, что происходит при использовании одного символа решетки#Благодарю за оперативный ответ! Всё работает, и спасибо за тему — очень пригодилась!
Driver у меня к Вам огромная просьба мне помочь. Я взял за основу Ваш вариант с страницы dbmast.ru/files/css3_modalwin/demo.html
Чтобы было понятно вот моя страница http://www.yenilhyzmat.com посмотрите на этой странице одни фотки выскакивают нормально, а другие вылезают за края. Изгаляться в фотошопе нет возможности и времени да и фоток порядка несколько тысяч вставляю как есть. Как встроить в файле style-modal.css или на основной странице то ли автоподстройку то ли задание размеров отдельно для каждого модального окна. Некоторые окна также получаются крайне маленькими.
В этом куске из файла style-modal.css
/* стили модального окна */
.popup {
top: 0;
right: 0;
left: 0;
font-size: 14px;
z-index: 10;
display: block;
visibility: hidden;
margin: 0 auto;
width: 5%;
min-width: 250px;
max-width: 400px;
почему то нет задания высоты только ширина.
Помогите с советом пожалуйста дельным.
Красивое с видео, больше понравилось.
Профессиональная помощь студентам. Интересует всплывающее окно для сайта.
Если при загрузке сайта, то посмотрите такой вариант.
Коллекция модальных окошек и форм здесь.
использовал ваш код, огромное спасибо! только один вопрос:почему когда жмешь возврат на предыдущую посещенную страницу опять выскакивает модальное окно как избавиться от этого эффекта?
Потому что в адресе прописан id мод.окна
href="#win1"Чтобы не устраивать танцы с бубнами, посмотрите вариант окошек на скрытых чекбоксах: Тынц>>
Спасибо за вашу помощь!
Но есть вопрос: информации в модальном окне много и по размеру окно растягивается вниз за границы экрана, а скролла-прокрутки нет. Что нужно сделать?
Спасибо за помощь!
Но есть вопрос: информации в модальном окне много, текст ниже видимой зоны прочесть невозможно, нет прокутки-скролла. Что надо сделать?
Здравствуйте, Alex.
В комментах отвечал уже по прокрутке, но кому интересно всё это разгребать))) Продублирую:
Поместите все содержание внутри модального окна в дополнительный div-контейнер, всё кроме кнопки закрытия, получится должна примерно такая картина:
<div class="popup"><div>
Сюда размещаете любое содержание, картинки, текст, и т.д....
</div>
<a class="close" title="Закрыть" href="#close"></a>
</div>
Далее вам нужно в CSS найти следущие селекторы:
.popup p, .popup div {margin-bottom: 10px;
}
Разбить их на отдельные классы, чтобы параграф p и блок div не дублировали свойства, и добавить полосу прокрутки для блока div, а также выставить нужную вам высоту этого блока, должно получиться следующее:
.popup p {margin-bottom: 10px;
}
.popup div {
overflow:auto;
height: 500px;
}
Как понимаете, значение height: 500px; я указал лишь в качестве примера, выставляете своё и радуетесь модальному окну с полосой прокрутки.
Благодарю. С прокруткой все получилось.
И еще интересует, как возможно модальное окно с формой обратной связи открывать в модальном окне? Т.е. сначала открываем информацию в модальном окне и в нем есть еще кнопка для формы (можно ли его открыть вторым модальным окном?)
Или это слишком заморочно?
Возможно.
Форму помещаете в мод.окно, например с идентификатором
id="win1". Если кнопка для вызова формы в виде ссылки, указываете id в адресе:<a href="#win1" rel="nofollow">Открыть форму</a>При нажатии на кнопу, первое мод.окно закроется, а второе с формой, соответственно откроется
как ни крутил, а второе окно открываться так и не хочет…
и все ссылки на странице становятся недоступными…
м.б., конфликтует со скриптами шаблона… в общем, забил…
Здравствуйте!
Использовал Ваш код, делаю пока локально. Но при нажатии на кнопку, только темнеет окно, а модальное окно не появляется. Подскажите пожалуйста в чем моя проблема.
Заранее спасибо.
Здравствуйте.
Из вашего коммента вырезал код, предварительно его просмотрев.
Смотрите в селекторе
.overlay:target+.popup, с какого-то перепуга, у вас задано отрицательное значениеtop: -20%; соответственно окно и не показывается, достаточно прописатьtop: 20%;и всё будет даже очень хорошо)))Огромное спасибо за быструю помощь. Сделал как Вы сказали и все заработало.
Как сделать чтобы URL модального окна не было видно при открытие или закрытие?
Здравствуйте!
Подскажите что сделать чтобы не было в адресной строке не показывалось /#win1 и /#close при открытие или закрытие модального окна.
Заранее спасибо.
Тоже интересует этот вопрос.
Если без js, посмотрите вариант на срытых чекбоксах: см.пример. Окно легко оформите по-своему, с анимацией то же самое, прикрутить можно любую.
PS: Меня вот тоже интересует вопрос, что такого устрашающего в якоре, ни кого же не пугает использование якоря для быстрого перехода к нужному разделу страницы, например? ХЗ короче…
Долго мучился чтобы сделать возможность размещения сразу нескольких всплывающих окон без скрипта и вот оно! Работает!
Спасибо огромное за модуль.))
можно как ни будь организовать переход к след картике? не выхоя из простмотра текущей, заранее благодарен
Можно конечно. В первом окошке, просто укажите ссылку на следующее модальное окно. Например, первая картинка у вас выводится в окне с
id="win1", последующие соответственно по нарастающейid="win2",id="win3"и т.д. В тело первого окошка прописываете ссылку на следующее окно:<a class="" href="#win2">Вперёд</a>Во втором окне прописываете уже две ссылки, одна будет вести на следующее окошко с картинкой, а другая на предыдущее:
<a class="" href="#win1">Назад</a><a class="" href="#win3">Вперёд</a>
Ссылки можете прописать сразу после кнопы закрытия окна
Таким образом, вы получаете подобие контрольной панели, как вы оформите ссылки, это уже дело вкуса. Обзовите как-нибудь логично класс этих ссылок, что-нибудь типа
class="btn_control"и уже в css оформите, как вашей душе угодно.Добрый день. У меня такой вопрос.
У меня несколько модальных окон с затемнением, первое работает нормально (modal1, overlay), а вот остальные не хотят (modal2, overlay), (modal3 overlay)… пробовал добавлять overlay1,2,3 не помогает, в чём проблема, подскажите?
Добрый день,
все прекрасно работает, но есть один вопрос по поводу прокрутки в модальном окне.
Если со временем будут добавлятся новые картинки, тексты — как сделать так, чтобы высота div-блока автоматически подстраивалась?
.popup div {overflow:auto;
height: 100%;
}
Так, к сожалению, не работает. А постоянно задавать конкретное число пикселей не подходит… Очень надеюсь на Вашу помощь!
Здравствуйте, Дмитрий.
Используйте
max-heightопределите для себя оптимальное максимально-возможное значение с прицелом на будущее и всё. При достижении этого значение будет появляться прокрутка. Только вот смысл вашей затеи мне не совсем понятен…Спасибо большое! Как раз то, что мне было нужно!
НУ почему не понятен ? Он хочет чтобы при нажимании на пункты меню — страницы сайта выпадали в мини окне, для красоты ,а не в полном размере с перезагрузкой страницы.
Здравствуйте.
Скажите пожалуйста, можно ли поправить, чтобы окошко открывалось через определённое время, после открытия страницы, либо на определённом этапе прокрутки?
Здравствуйте.
Посмотрите такое решение: всплывающее окно при загрузке сайта
Добрый день! Подскажите пожалуйста как подправить параметры модального окна, чтоб корректно открывался панорамный снимок, при условии, что все остальные в див блоке будут обычного формата. У меня этот снимок переворачивается и отображается боком. (на сайте — Ряд фотографий 4-й с верху, фотография 4-я слева)
Заранее большое спасибо!
прошу прощения, конкретизирую страницу
У вас оригинальная картинка изначально сохранена повёрнутой (открыть картинку в новой вкладке). Сохранил картинку себе, открыл в редакторе, установил правильное положение и адаптировал под веб, залил на хостинг картинок. Что получилось смотрите в редакторе: тынц
Другое дело, что для масштабных и панорамных изображений всё же лучше использовать другие решения, специально заточенные под эти цели.
Спасибо, вот я чайник :0) незаметил повёрнутое избржее. Порекомендуйте пожалуйста ссылочку для решений заточенных под панарамные кадры?
Привет разработчикам этого решения. Вопрос такой. Когда кликаю на элемент, который выводит модальное окно — отображается само модальное окно. Но если не кликать на пустую область и крестик закрытия — обновить вкладку браузера — то модальное окно никуда не пропадает, хото по логике ожидания его не должно быть. Подскажите как поправить
Проще использовать вариант на скрытых чекбоксах : тынц
Здравствуйте!
На десктопе все отлично работает, а вот на мобильном всплывает в самом верху страницы, тоесть, если у меня ссылка стоит в футере, то всплывающее окно я смогу увидеть проскролив в самый верх. Можно ли как-то это исправить?
Спасибо!
Если ничего не меняли на Android и iOS должно бы корректно работать
Посмотрите позиционирование
.popup, должно быть именно фиксированнымposition: fixed;чтобы окно всплывало и оставалось там где вы ему назначили, в примере это 20% от верхнего краяtop:20%;при активном окне (см. селектор.overlay:target+.popup)Если хотите видеть окно строго по центру измените это значение на 50% и в трансформацию, так же внесите изменения, сделайте
transform: translate(-50%, -50%);Изменение стилей на предложенные значения не привели ни к чему. Мозилла и без них открывает модальные окна как положенно, а опера и хром соблюдают правила только со ссылками на модальные окна, расположенными в первом (начальном) окне, при скроллинге на ссылки, расположенные намного ниже (не попавшие в зону видимости начального состояния страницы) выводят модальные окна со сдвигом вверх — к началу страницы.
Добрый день! Подскажите пожалуйста почему после закрытия окна, видео продолжает играть. Как это можно исправить?
Жду не дождусь когда в адблок по дефолту все это всплывающее гавно поместят.
задолбали, мягко говоря.
Добрый день. Подскажите: нужно вывести большой обьем текста. Как сделать проурутку во всплывающмем окне ?? а то колесико мыши прокручивает основную страницу на заднем плане.
Простите, не заметило что тут много страниц с комментариями — ответ нашел. Только остался один небольшой вопрос, который не могу решить — как сделать чтоб кнопка закрытия перемещалась вместе с полосой прокрутки. Пытался поставить свойство position: relative , но не помогло… все таки модальное окно и я не совсем понимаю как оно будет цепляться — за модальное окно или за основное.
Классно, но в Эксплорире 8 не работает, белая полоса и все.
Здравствуйте. Хочу сделать страницу с всплывающими окнами. Идея такая: текст статьи с кратким описанием некоторых предложений, а для заинтересовавшихся более полное описание будет выводится во всплывающем окне при нажатии на ссылку типа «Подробнее». Мне нужен простой и надежный функционал без лишних рамочек, теней и т.д. Попробовал вашу конструкцию, но что-то не идет. К сожалению я не силен в верстке, подскажите
Дякую дуже поставив на сайт. Саме головне простота і немає сторонніх підключень JS
Добрый день!
Не пойму как вставить в joomla. В style.css все прописал. В модуле пишу только html с отключенным визуальным редактором. Почему то весь фарш на странице. Комменты все 13 страниц прочел… 🙂
Даже не могу предположить, почему у вас не работает привязка к стилям, именно popap никак не связан с прописанными в базовый файл стилями. Попробуйте ради эксперимента прописать стили напрямую в html шаблона в разделе head, или же создайте отдельный файл стилей модального окна и пропишите его.
В общем и целом разобрался. Создал свой файл css и дело пошло.
Вот пока борюсь с изображением картинки (первая буква абзаца) и текста. Почему-то буква становится огромной.
А так конечно классное решение и мне как начинающему просто супер!
Премного благодарен!
Доброй ночи.
Подскажите, как сделать чтобы модальное окно выезжало слева на право?
Здравствуйте.
Для этого необходимо изменить начальные позиции окна и трансформации, а так же положение окна при активации с помощью :target.
Вот что должно у вас получится:
.popup {top: 50%;
right: 50%;
left: 0;
font-size: 14px;
font-family: 'Tahoma', Arial, sans-serif;
z-index: 10000;
margin: 0 auto;
width: 100%;
min-width: 320px;
max-width: 820px;
/* фиксированное позиционирование, окно стабильно при прокрутке */
position: fixed;
padding: 15px;
border: 1px solid #383838;
/* скругление углов */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
background-color: #FFFFFF;
/* внешняя тень */
-webkit-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
-moz-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
-ms-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
-o-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
/* трансформация */
-webkit-transform: translate(-150%, -50%);
-ms-transform: translate(-150%, -50%);
-o-transform: translate(-150%, -50%);
transform: translate(-150%, -50%);
/* анимируем трансформацию */
-webkit-transition: transform 0.6s ease-out;
-moz-transition: transform 0.6s ease-out;
-ms-transition: transform 0.6s ease-out;
-o-transition: transform 0.6s ease-out;
transition: transform 0.6s ease-out;
}
/* активируем мод. окно */
.overlay:target+.popup {
left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Модальное окно будет выезжать слева на право. Сравните фрагменты кода из демо и представленный выше, и увидите что к чему
Класс, спасибо! Выручил. Очень полезная штука.
А как сделать, чтоб это окно закрывалось только по кнопке закрыть, а не просто кликом
в другую область сайта — не окна?
Фон затемнения(подложка мод.окна) выполнен в виде ссылки(тег
<a>), просто замените, например на<div>На примере первого мод.окна следует:
<a href="#x" class="overlay" id="win1"></a>заменить на:
<div class="overlay" id="win1"></div>Всё, теперь окно будет закрываться только по кнопке закрытия. При использовании нескольких мод.окон на странице, не забывайте про правильный
idи всё у вас получится.Спасибо за отличный пример. У меня единственная загвоздка возникла:
Скопировал html-код к себе, но! если я убираю тег — окно не появляется! Просто затемнение экрана! Вставляю его — все ок, окно появляется! Сайт на wordpress. В чем может быть дело?
При заключении модального окна в теги
<form>оно перестает работать, как быть?Так же не понятно где настраивать прозрачность
<opacity>…Здравствуйте, Саша.
1. Просто не заключать м.окно в тег
<form>. Если вам нужна форма, поместите её в м.окно, или сделайте саму форму модальной: см.примеры2. Прозрачность чего? Если фона затемнения, то прозрачность регулируется последним цифровым значением в свойстве
background-color: rgba(0, 0, 0, 0.65);(цветовая модель RGBA), в данном примере это 0.65, попробуйте увеличить или уменьшить значение и увидите результат. Так же уровень прозрачности определяют с помощью свойства opacityМожет все таки вы мне подскажите конкретное искомое мной модальное окно, считаю Вас докай как минимум в том, что вы выкладываете на вашем чудесном сайте. Необходимо модальное окно для работы с PHP формами (не регистрацией). Простое и не нагруженное излишним кодом с возможность закрываться без клика на кнопке закрыть. Я же потрачу гораздо больше времени тыкая во все модалки в сборнике)
Подскажите, пожалуйста, почему данный код может не срабатывать в мозиле? Во всех остальных браузерах ссылка работает, появляется модальное окно, а мозила вообще не видит, что там что-то есть, при нажатии кнопки ничего не происходит.
Как можно выводить в модальном окне фрагмент из другого файла (*.txt, *.html) заключенный в теги ? Не хотелось бы перегружать index.html, в котором присутствуют только ссылки (много ссылок) для открытия модальных окон, содержимым модальных окон, в которых много текста.
Используйте iframe.
спасибо, но вымирающими тегами пользоваться нет смысла. вопрос решен с помощью jquery
Здравствуйте, Driver.
Во первых — спасибо за Примеры!
У меня к Вам несколько вопросов:
1) из demo.html я открыл модальное окно , и c помощью iframe вывел в модальном окне фрагмент другой music.html страницы, на которой звучит стандартный html 5 с autoplay=”autoplay”. Закрываю модальное окно, нажимая не на «х». Модальное окно свёртывается. При этом demo.html открыта и звук продолжает звучать. Закрываю demo.html. Звук пропал. Открываю заново demo.html, звук со страницы music.html снова звучит, хотя я ещё не открывал модальное окно id=”mus” с фрагментом music.html.
Чтобы понять в чём дело, убираю autoplay=”autoplay” со станицы music.html — звук на странице demo.html при её обновлении или закрытии/открытии прекращается.
Восстанавливаю autoplay=”autoplay” — та же история. Очищал кэш с помощью CCleaner — ничего не помогает.
Вопрос1 — в памяти Windows остаётся вся не стёртая страница music.html, или только ссылка на её активное содержание, которая при открытии demo.html и запускает звук с нераскрытой music.html?
Где она прячется в памяти?
Вопрос2: как очистить из памяти ссылку на music.html, чтобы не отменяя для autoplay=”autoplay” звук прекращался, когда закрываю модальное окно?
Вопрос3: если очистить невозможно, то как в момент закрытия модального окна обновить его содержимое — вместо music.html, подставить пустой.html (без звука), и только после этого закрыть окно? Как это конкретно описать в коде применительно к Вашему demo.html?
Помогите, пожалуйста.
Спасибо за урок.
В Вашем примере несколько всплывающих модальных окон с различными id. Как проверить открыто ли, к примеру, окно «win3»?
Поясню вопрос — для стандартных всплывающих окон windows, как пишут, можно проверить лишь их закрытие:
newWin = window.open (…)
if (!newWin.closed) {
alert («Всплывающее окно открыто.»)
}
else {
alert («Всплывающее окно закрыто.»)
}
А как быть с данным всплывающим окном на CSS3 — есть ли метод, чтобы отловить открыто ли окно «win3»? Если есть, то как описать условие проверки и куда его помещать на странице?
Здравствуйте, Борис.
Самое простое, это посмотреть в адресную строку браузера, там ясно отображается id открытого окна, например в моём демо, когда окно открыто будет так:
css3_modalwin/demo.html#win1при закрытии окна так:
css3_modalwin/demo.html#closeЕсли же вам нужны уведомления в отдельном диалоговом окне, понадобится js
Андрей, спасибо за подсказки с якорями. Всё получилось.
Сотрите мой второй вопрос к вам с нелепой блок схемой. Он уже не нужен.
Здравствуйте! А можно в popup окно вложить html Документ? например тест.
Конечно можно, что прекрасно показано в примерах.
Здравствуйте! М.Окно работает прекрасно, но если разместить слишком много текста, а в моем случае это «политика конфиденциальности» то отсутствует скролл, т.е. невозможно спуститься и дочитать текст. Подскажите, пожалуйста, как поправить?
Заранее благодарен!
Здравствуйте, Виктор.
На вопрос по поводу прокрутки отвечал ранее в комментах, посмотрите здесь.
Спасибо. Очень простое решение — то что нужно)
Здравствуйте! Подскажите пожалуйста, вот для эксперимента установил 4 кнопки, как на демо, и вставляю в третье окно iframe код с youtube. Оно проигрывается, но почему то не закрывается…
Здравствуйте, Виктор.
Оптимального всех и вся устраивающего решения остановки видео при закрытии окна средствами CSS ни у меня и ни у кого пока нет, извращается каждый по-разному. Например в своём демо, для кнопки закрытия окна прописал событие
onclick, указав в ссылке адрес демо-страницы, т.е. страницы на которой расположено окно с видео:<a class="close" title="Закрыть" href="demo.html" onclick="demo.html(); return false;"></a>Что тупо вызывает перезагрузку данной страницы, соответственно видео останавливается, то же самое если просто в ссылке задать пустой атрибут
href="/", без onclick:<a class="close" title="Закрыть" href="/" ></a>Не самое лучшее решение конечно, но по-другому и по всем правилам, только с подключением в работу jQuery и YouTube JavaScript Player API. Метод отлично срабатывает для встроенного видео с YouTube, подробно расписал о нём в обновлении к статье Модальный блок видео на CSS3
Чтобы закрыть вопросы и в этой статье, в заключении пожалуй стоит дать пояснения по-поводу остановки видео, чем сей час же и займусь.
Здравствуйте, нужна помощь! Использую платформу опенкарт искал вариант popup окна без js. Сделал как написано в данной статье. Работает это решение только на определенных страницах (на главной странице в модуле табы). В страницах категории не работает, при нажатии просто переходит на главную страницу и всё. Пожалуйста буду ждать ответа.!
Здравствуйте! Подскажите пожалуйста, как сделать, чтобы модальное окно на смартфоне прокручивалось вместе с сайтом. У меня там список, и поэтому окно не влазит, надо прокручивать.
Спасибо
Всё, спасибо не надо, уже нашёл
Привет! Ни как ни могу привязать модалку а именно, готовое менюшка, нужно что бы при нажатии на один из пунктов меню всплывала модалка, подскажите каким образом это осуществить… стили прописаны:
…
……
Алексей, здравствуйте.
При вставке кода в комментарий используйте кнопку «Код» на панели комментирования.
<a href="#win1" rel="nofollow"><i></i>
<strong>бла...</strong>
бла...
</a>
Вот кусок из меню, как прикрутить модалку
<a href="#win1" rel="nofollow">, что бы при клике на пункт меню она появлялась?Пункты меню, по сути это те же кнопки, как в демо. Атрибут
href="#win1"в ссылке пункта меню указывает на то что будет открыто мод.окно с идентификаторомid="win1". Для этого в html должна присутствовать следующая конструкция:<!-- Модальное окно №1 --><a href="#x" class="overlay" id="win1"></a>
<div class="popup">
Здесь вы можете разместить любое содержание, текст с картинками или видео!
<a class="close"title="Закрыть" href="#close"></a>
</div>
Ну и в css необходимо прописать все необходимые правила, в статье и в исходниках они представлены.
Не вижу ни какой сложности, весь фарш разжеван давно и основательно)).
Доброго времени суток.
Срабатывает только то что идет первым в html теле.
Например:
Гиперреализм
Срабатывает только
Если их поменять местам, перенести код Модального окна 4 выше чем 3, то сработает
а все остальные НЕТ.
Срабатывает на отлично только самое верхнее !
Пока не понял почему…
Если кто-то знает ответ…подскажите…очень нужно…
SOS…
Many thanks !
Здравствуйте.Модальное окно отличное и работает идеально во всех современных браузерах.Интересует вопрос, можно ли скрыть эти модальные окна чтобы они совсем не показывались когда браузер не поддерживает их, потому что они тогда висят все в одном месте вверху сайта
Добрый день!
Спасибо! Отличный способ.
Но возникла проблема для мобильной версии. Постоянно отображается модальное окно на мобильном устройстве. Возможно где-то чего-то не хватает?
Буду очень благодарен за помощь
Добрый вечер. Сделал по вашему примеру всплывающие окно в галерею. На компе оно идеально работает, а вот залитое на хостинг уже нет. Во всплывающем окне появляется только фон без картинки и в теле сайта отображаются картинки, которые должны быть во всплывающем окне. Подскажите, пожалуйста, как исправить. Заранее благодарен.
Здравствуйте!
Благодарю Вас за замечательный скрипт! Все сделал по Вашей инструкции, но прошу немного помочь. Модальное окно (кнопка «Изложить ситуацию») «уходит» вниз за край монитора. В результате не видно части содержимого. Большая просьба, подскажите, пожалуйста, что и где подправить. Заранее благодарен!
Положение модального окна по вертикали(ваш случай) регулируется в файле стилей класс .overlay:target+.popup меняйте свойство top: 20%;
по горизонтали класс .popup свойство left: 50%;
Добрый вечер. Модальное окно все ок работает,но не полностью. Почему после того как нажму на закрытие окна(крестик),то окно не закрывается?
При нажатии на крестик крестик крутится.но ничего не происходит и ничего не закрывается.А если на любую область нажать то окно закрывается.Как исправить?
Могу только предполагать, так как не вижу то что вы делаете(пациента), что используя кнопку закрытия ввиде ссылки(собственно как в примере), вы по какой то причине упустили или изменили адрес ссылки, см. атрибут
href="#close", кстати в адресе#closeсовсем не обязательное значение, но оставлять адрес пустым, считается вроде как не совсем кошерным, да и страница при этом тупо перезагружается, можете прописать простоhref="#", но тогда при закрытии окна страница прокрутится вверх, что тоже не есть хорошо.Как вариант
href="#!"или же, как в случае с ссылкой фона затемнения overlay, прописываетеhref="#x", что выглядит вполне логичным.Других причин бага с закрытием окна по кнопке не вижу.
Спасибо за ответ, но я решил эту проблему кардинально… Решил что и без окон сайт ничего. А потом и вовсе бросил так как понял что данный товар неактуален. А проблема была скорее всего в конфликте с чем-то в коде.
Добрый день.
Использую пятый вариант. Подскажите пожалуйста, где я делаю ошибку. У меня есть несколько картинок, я хочу открыть например вторую, но в модальном окне открывается всегда первая картинка. И подскажите пожалуйста, как изменить размер, а то они очень уж большие, искал — не разобрался…
Спасибо
Не могу вставить контент в «здесь будет текст, видео, всё, что угодно». Ссылка во фрейме не даёт результата. Открывается белый пустой лист.
Вариант №3, видео youtube встроено как раз таки в iframe, всё прекрасно загружается и показывается.
Для наглядности, в песочнице, специально для вас, забабахал пример: Тынц
Вариант третий самый нормальный. Другой момент, как на это отреагирют поисковики.
В большинстве случаев использование именно модальных окон (окна взаимодействия) или оверлеев, которые открываются в том же окне браузера, не является проблемой до тех пор, пока они не связаны со спамом, рекламой или чем-то ещё, что явно мешает пользователю.
Другое дело поп-апы, которые открываются в новых окнах, Google их люто ненавидит и считает нарушением правил поисковой системы. Многие браузеры попросту блокируют такие окна автоматически.
По SEO и модальным окнам, если интересно, можете почитать неплохой материал на Дигистр