Dobrovoi Master
сделано с душой
В состоянии постоянного подключения...

Модальные всплывающие окна с помощью CSS3 без Javascript

Модальные всплывающие окна с помощью CSS3 без Javascript

В очередной раз обращаюсь к теме создания модальных(всплывающих) окон. В последнее время меня все больше интересуют, различные техники исполнения всплывающих окон, без использования javascript, плагинов jQuery и т.д. Больший интерес вызывает возможность применения чистых стилей и неисчерпаемого потенциала новых функций .
Основываясь на разработках некоторых уважаемых буржуинов, они в этом плане ребята ушлые, получаются неплохие результаты, в плане создания модальных окон с помощью CSS3. Задача, в первую очередь состоит в том, чтобы добиться более-менее устойчивой кросбраузерности конечного результата, ну и конечно же, с наименьшими потерями, уменьшить общее количество кода, как в HTML так и в CSS, дабы облегчить жизнь многострадальным труженикам сайтостроения.
Что получается в итоге, у меня в этом плане на сегодняшний день, мы с вами и посмотрим, а заодно, и научимся делать всплывающие модальные окна с помощью «магии» CSS3.

Обновлено: 27.10.2017

 
Модальное окно с помощью CSS3
 
Для начала, все те кого заинтересовала эта тема, можете взглянуть на пример работы модальных окон в различных вариантах и скачать исходники:

Не стоит воспринимать данный урок, как руководство к действию, так как на этом этапе удалось добиться уверенной поддержки лишь современными браузерами ( IE 9+, Firefox, Safari, Opera, Chrome ). С оглядкой на то, что древние версии браузера IE еще достаточно популярены среди пользователей, рекомендую рассматривать эту статью в виде некоего эксперимента, демонстрации возможностей CSS3.

Хорошо, теперь перейдем непосредственно к самой раскладке html кода и стилевого формирования нашего модального окна с помощью 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. Стоит упомянуть о том, что текст для каждого из шаблонов был написан вручную. К тому же, вам не нужно обладать какими-то сверхъестественными знаниями в сфере программирования, чтобы создать впечатляющий онлайн-проект.

С Уважением, Андрей .

Буду признателен, если поделитесь ссылкой на запись в своих соц-сетях:

Всего комментариев: 421

  • SGanabiS: 18 октября, 2012 в 14:09

    В IE все равно не работает…

    Ответить
    • driver: 18 октября, 2012 в 14:17

      SGanabiS
      Будьте пожалуйста поточнее, что именно не работает в IE и в какой именно версии этого недобраузера. Разгадывать загадки не мой профиль и к сожалению я не телепат.

      Ответить
  • SGanabiS: 18 октября, 2012 в 14:19

    Все работает прошу прощения…

    Ответить
    • driver: 18 октября, 2012 в 14:22

      Вот видите, как все просто. 🙂

      Ответить
  • SGanabiS: 18 октября, 2012 в 14:36

    Спасибо, на самом деле ваш пример работает… после некоторых манипуляций и изменений (стили, и добавление формы регистрации) перестает работать в IE, в остальных браузерах все ок. Скорее всего косяк в моих кривых руках. Буду разбираться, если не получится — побегу к Вам.

    Ответить
    • driver: 18 октября, 2012 в 14:45

      Всегда рад помочь. Удачи!!!

      Ответить
  • Tibedox: 22 октября, 2012 в 16:32

    Это всё замечательно, и отлично работает, но вот что-то я никак не возьму в толк, как сделать, чтобы окно само по себе открылось через пару секунд после загрузки страницы? Если ставить редирект, то он зацикливается.

    Ответить
    • driver: 22 октября, 2012 в 19:34

      Tibedox.
      Для реализации вашей идеи лучше использовать javascript, примерно так как описано в статье Стабильный информационный блок. Элементы оформления, размер и позиционирование всплывающего окна легко сможете изменить экспериментируя с параметрами стилей CSS.

      Ответить
      • Tibedox: 23 октября, 2012 в 15:46

        Спасибо за помощь. В фоксе всё работает отлично, однако пришлось отказаться от этой затеи, так как времени мало, а настроить для IE я сходу не смог.

        Ответить
  • driver: 9 ноября, 2012 в 20:24

    Александр. Доброго времени суток.
    Всеми фибрами своей души, целиком и полностью с вами согласен. Но реальность именно такова, что огромное количество пользователей сидят на IEшке и с этим как ни крути приходится считаться. Хотя я часто тоже забиваю по полной на то как пережует мои эксперименты с CSS3, этот недобраузер. 9 И 10 версии IE, стали более или мене «сговорчивее» в плане поддержки функций CSS3, но по прежнему нет-нет да и ломают общую картинку. Конечно же никто не собирается и будет отказываться от интересных идей и решений в угоду
    одного го…ого и крайне неудобного браузера.

    Ответить
  • Andrey: 27 ноября, 2012 в 00:22

    А iframe поддерживает?

    Ответить
    • driver: 28 ноября, 2012 в 11:36

      Поддерживает.
      В примере, видеоролик с Yuotube встроен в модальное окно именно с помощью iframe.

      Ответить
  • luckywalrus: 3 декабря, 2012 в 14:43

    Во-первых, спасибо за такие замечательные окна: выглядит очень эффектно и работает надежно.
    Одно не пойму. Тут обсуждали работу этих окон в ИЕ. И, вроде, как сошлись на мнении, что в ИЕ они тоже должны работать. К сожалению, у меня их запустить в ИЕ не получилось, даже в «чистом» виде (файл ДЕМО). Версия — 8 под XP.
    Все остальные браузеры (опера, хром, мозилла) отображают нормально. Может над самим браузером ИЕ с бубном потанцевать нужно? 😉

    Ответить
    • driver: 3 декабря, 2012 в 19:49

      luckywalrus. Спасибо за отзыв.
      Да, к сожалению IE 8 и более старых версий, не поддерживают большинство свойств CSS3 и танцы с бубном тут не помогут. Начиная с версии IE 9+, мягкотелые снялись с ручника, повернулись лицом к разработчикам и включили поддержку CSS3, правда не в полном объеме, но хоть что то.

      Ответить
  • Жорж: 12 декабря, 2012 в 20:54

    Здравствуйте! Спасибо за полезный урок! Подскажите, как отцентрировать в ИЕ текст? Во всех нормальных браузерах text-aligne: center нормально показывает текст, а в ИЕ в угол съезжает, гад:)

    Ответить
  • driver: 12 декабря, 2012 в 21:32

    Здравствуйте!
    В классе .popup изменяете значение свойства text-align: justify; на text-align: center; Все прекрасно работает в IE 8+ да и во всех других. Можете непосредственно в html для выравнивания текста по центру, использовать теги заголовков h1 h2 и т.д. или тег параграфа p с атрибутом align=”center”. Тоже самое при работе с тегом div.
    Обратите внимание на различные бесплатные и премиум уроки по web-дизайну, о которых мой блог так и кричит. AУ-У!
    Удачи!

    Ответить
  • Жорж: 12 декабря, 2012 в 21:41

    Большое спасибо за оперативный ответ!!
    text-align: justify не дает эффекта в ИЕ8, а жаль:)
    Обязательно изучу Ваш замечательный сайт прямо сейчас:)
    Желаю Вам всяческих успехов!

    Ответить
    • driver: 12 декабря, 2012 в 21:59

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

      Ответить
  • Ilit70: 13 декабря, 2012 в 04:35

    Обидно.но не заработало! А очень хотелось! Кроме эффекта “сумерки! не чего не выходит. А очень хочется. Если у Вас будет время посмотрите пожалуйста! Заранее благодарен.

    Ответить
  • driver: 13 декабря, 2012 в 11:46

    День добрый.
    Вам необходимо убрать теги 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 код кнопки из урока.

    Ответить
  • Ilit70: 13 декабря, 2012 в 13:04

    Спасибо за ответ!!! Не помогает… кнопки «склеились» и все. Код взят из урока 1к1…там тоже стоят теги р и br Да и в исходный код они пропишутся автоматом даже если их и уберешь… экспериментировал уже по всякому… Размещение CSS может влиять?

    Ответить
  • ilit70: 13 декабря, 2012 в 19:57

    Все заработало!!! Спасибо!! дело в авто форматировании Ворд Прессом. И…всего навсего установка чистого вордпресса на под домен…тестирование-впустую…установка и проверка 14 плагинов-впустую!! 15!!только 15-й найденный у японцев помог! Боже как я люблю WordPress!!

    Ответить
    • driver: 13 декабря, 2012 в 20:41

      Очень рад за вас. Заходите почаще, вместе все у нас получится!

      Ответить
  • Iana: 19 декабря, 2012 в 03:45

    Здравствуйте! А почему само видео не идёт? Или это только у меня не идёт?

    Ответить
    • driver: 19 декабря, 2012 в 19:32

      Iana, Здравствуйте.
      Да это только у вас не идёт:)))

      Ответить
      • Iana: 19 декабря, 2012 в 21:31

        Странно, что после нескольких тестов у других людей тоже не шло. Я из класса popup убрала transform полностью, добавила position absolute и выровняла с помощью margin и всё отлично работает.

        Ответить
  • Andrew: 6 февраля, 2013 в 20:28

    Здравствуйте!
    Использовал Ваш код на своей странице, немного подкорректировав(добавил скроллинг, изменил размеры окна)
    Но не могу понять, почему у меня текст внутри окна будто полупрозрачный… ( ссылка «старые записи»)
    Все остальное устраивает, хотя с удовольствием воспользовался бы предложенным здесь но, к сожалению, исходник там не прилагается.
    Кроме того, выше в фрагменте кода <a href="#win1" rel="nofollow"></a> не нашел в css элемента win_pop, не знаю, насколько это критично.

    Ответить
    • driver: 7 февраля, 2013 в 01:45

      Andrew.
      На счет исходников, это дополнение к основному уроку Модальное окно с помощью CSS и jQuery, вам остается только добавить в окно полосу прокрутки, как это сделать и рассказано в статье.
      Идентификатор win_pop, можете смело игнорировать ))), бывает, рабочий процесс, запарился, прописал из чернового варианта. Спасибо, поправил в записи пример кода ссылок вызова окна.

      Ответить
  • Andrew: 6 февраля, 2013 в 23:36

    Прошу прощения, все наладилось…
    Просьба насчет исходника с dbmast.ru/modalnoe-okno-s-polosoj-prokrutki остается в силе

    Ответить
    • driver: 7 февраля, 2013 в 01:50

      Ну и славненько.
      Про исходники ответил.

      Ответить
  • Andrew: 7 февраля, 2013 в 18:55

    Спасибо, просто хочется как можно меньше использовать сторонних скриптов. А здесь все устраивает, единственно, с добавленным скроллингом кнопка закрытия тоже уезжает

    Ответить
  • driver: 7 февраля, 2013 в 20:42

    Andrew.
    Вы наверное что то не правильно делаете добавляя полосу прокрутки. Специально протестировал с различным содержанием, все прекрасно работает и кнопка закрытия находится там где ей и положено ))).
    Вставьте в тело модального окна следующее:
    <div style="padding: 20px;
    overflow: auto;
    width: 480px;
    height: 300px;
    background-color: #ffffff;">
    Какой-нибудь стишок незамысловатый, для объема содержания.
    Бла-бла-бла - (текст) Бла-бла-бла - (текст) Бла-бла-бла - (текст)
    Бла-бла-бла - (текст) Бла-бла-бла - (текст) Бла-бла-бла - (текст)
    </div>

    Уверен, все у вас получится.

    Ответить
  • Andrew: 8 февраля, 2013 в 14:39

    Благодарю за подсказку!
    Текст с прокруткой помещен еще в один 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 подбирал опытным путем.
    угловые скобки коммент не принимает,поставил круглые:)
    Спасибо за участие!

    Ответить
    • driver: 8 февраля, 2013 в 19:44

      Не знаю, может вам так сподручнее, но все параметры основного блока окна необязательно прописывать в первом div, все прекрасно корректируется через класс «popup» в таблице стилей. Да и в принципе, ширина, высота и отступы в основном div (в разметке html) совсем необязательны, так как окно подстроится под содержание, учитывая выставленные значения в css.
      Экспериментируйте, тестируйте в различных браузерах и выберите самый оптимальный вариант.
      Удачи!

      Ответить
  • Влад: 17 февраля, 2013 в 14:37

    Скажите а как вместо текста в всплывающем окне использовать ссылку на другую страничку, например я нажимаю на «открыть окно 1» я вылезает новая вкладка ?

    Ответить
  • Василий: 18 февраля, 2013 в 10:42

    Спасибо большое! Прекрасный пример! Всё отлично работает!)

    Ответить
  • Мавроди: 12 марта, 2013 в 20:41

    Спасибо! Помогла статья

    Ответить
  • Иван: 14 марта, 2013 в 18:36

    Спасибо за урок, очень пригодился при разработке моего сайта. 🙂

    Ответить
  • WebStark: 16 марта, 2013 в 18:48

    Добрый день не могу вставить это окошко в запись WordPress. Хоть намекните где копать! Зарание благодарен.

    Ответить
    • driver: 16 марта, 2013 в 19:09

      День добрый.
      В статье все предельно ясно расписано. В вашем случае, вставьте код css в файл style.css вашей темы WP, а дальше по примеру, в записи используете html разметку модального окна и ссылок для его активации

      Ответить
      • WebStark: 16 марта, 2013 в 19:14

        Сделал все и после открытие только экран темнеет а окошка нету.

        Ответить
  • kkk: 18 марта, 2013 в 02:06

    А не подскажите, такой вариант возможно где-нибудь найти:

    Ответить
  • noir: 24 марта, 2013 в 17:56

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

    Ответить
    • driver: 24 марта, 2013 в 23:13

      Все окна в примере одинаковы, различаются лишь содержанием, так что не совсем понимаю сути вашей проблемы (

      Ответить
  • noir: 25 марта, 2013 в 23:12

    При повторной вставке на свою страницу (полный бекап страницы), все получилось, сам не понял почему так было. Получалось так, вставляем ссылку на win1, вставляем текст win1, работает, вставляем ссылку win2 и текст win2, работает, вставляем ссылку win3 и текст win3, не работает. Удаляем текст win2, тогда win3 работает, все проверял несколько раз, все производилось копированием, ошибки исключены. Помог только полный бекап страницы и повтор процедуры с нуля.
    Отличные модальные окна, лучшие в инете. Единственное, что не смог сделать, задать жесткие границы длины всплывающего окна и его строгозаданного положения, на различных мониторах она получается разной при параметре «left=50%»

    Ответить
    • driver: 25 марта, 2013 в 23:29

      Спасибо за отзыв.
      Размер всплывающего окна, задавался с расчетом на изменение в зависимости от просмотра на различных пользовательских устройствах (мониторах комп., планшетах и т.д.).

      Ответить
  • Smog: 30 марта, 2013 в 23:11

    Большое Спасибо! Замечательный пример!
    Абсолютно незначительные вещи:
    Описание стиля на странице и стиля из примера доступного по ссылке «Download» немного отличаются. Конкретно, разница в правильности расположения кнопки «закрыть» и ее рамки.
    Так же по неопытности пытался использовать данный стиль на странице с twitter bootstrap. Появился конфликт стилей классов, конкретно класса все той же кнопки .close. А в дальнейшем вообще оказалось что у данного фреймворка есть свои красивые модальные окна.

    Ответить
    • driver: 30 марта, 2013 в 23:40

      Спасибо за отзыв.
      Относительно различий кодов в примерах статьи и исходников для скачивания. Часто в код примера статьи вносятся некоторые изменения по ходу обсуждения, или применения новых стандартов и параметров CSS3. Для скачивания представляется демо-страница и файл стилей(если есть) без изменений, т.е. такими, как есть на время написания статьи. В случае обновления кода до более стабильной, корректно работающей версии во всех браузерах, изменения обязательно вносятся и в архив с исходниками.
      Бывает, что в запарке я не успеваю вовремя сделать обновление архива.
      Так что, еще раз спасибо, архив обновлен))).

      Ответить
  • Артур: 5 апреля, 2013 в 15:41

    Почему то в IE не открываются… В чем может быть загвоздка?

    Ответить
    • driver: 5 апреля, 2013 в 15:50

      Проверил, все прекрасно открывается и в IE и в других браузерах тем более)) Загвоздка только на вашей стороне, откуда мне знать, может вы на IE 6 сидите )))

      Ответить
      • rikitiki: 13 апреля, 2013 в 16:06

        Да не открывается в IE8. IE8-штатный браузер XP, и если в нём не открывается то коду грош цена.
        Скорее всего загвоздка в rgba, с которым браузер не умеет работать. В лайгхтбоксах обычно в таких случаях меняют слой rgba на полупрозрачный psd. Тогда работает.

        Ответить
  • Иван: 14 апреля, 2013 в 18:01

    Спасибо, очень помогло)
    Не подскажите, почему в данном модальном окне размывается немного текст и картинки? Можете посмотреть здесь freelanca.ru
    В любом тарифе нажмите на «Подробнее». Особенно размыт в VIP-тарифе.
    Проверил, все из за «transform» в классе .popup. Убираешь, все становится четко, но окно не централизуется и убегает вниз, вправо.

    Ответить
    • driver: 14 апреля, 2013 в 18:33

      Иван.
      Особой размытости текста я не заметил у вас на сайте. Но если вам так кажется, то просто уберите или закомментируйте transform и соответственно без трансформации необходимо будет задать необходимую фиксированную ширину width(например width:500px; для ваших объявлений) и выровнять окно с помощью margin-left:-290px; margin-top:-235px;, тогда окно будет выводится по центру.
      И все же не забывайте, что этот способ всплывающего окна с помощью CSS3, не поддерживается IE8 (пока).
      Удачи!

      Ответить
  • s3kaaZa: 30 апреля, 2013 в 14:19

    А можно ли вставить в модальное окно флеш (swf) и аудио?

    Ответить
    • driver: 30 апреля, 2013 в 15:40

      Можно вставить в окно все что угодно )))

      Ответить
  • Денис: 3 мая, 2013 в 16:03

    Огромное спасибо за урок! Очень пригодился! Автору 5+

    Ответить
    • driver: 3 мая, 2013 в 21:16

      За отзыв спасибо и я очень рад, что вам пригодилось.

      Ответить
  • DimKa: 10 мая, 2013 в 13:17

    Здравствуйте, меня интересует такая штука… хочу сделать так чтоб в модатьном окне отображалась страница, html код которой находился бы отдельно (как страница), это возможно? то есть будет постоянная кнопка, которая присутствует на всех страницах сайта и чтоб код не менять в каждой страничке надо вывести ее отдельно.
    Заранее благодарю!

    Ответить
    • driver: 10 мая, 2013 в 21:51

      Добрый вечер.
      Все возможно. Создаете страницу например 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>

      Ответить
  • Evgeny: 13 мая, 2013 в 23:08

    Спасибо большое за всплывающие окна, но есть небольшой вопрос, не могли бы Вы связаться со мной через скайп и помочь в решении некоторых проблем? Напишите свой скайп в комментарии или сюда 161rus.zver@gmail.com

    Ответить
    • driver: 13 мая, 2013 в 23:18

      Добрый вечер.
      Evgeny. Связаться со мной вы можете через форму обратной связи на странице Контакты. И пожалуйста, указывайте свой реальный E-mail. Тогда я вам обязательно отвечу и помогу чем смогу ))).

      Ответить
      • Evgeny: 15 мая, 2013 в 20:04

        Еще раз спасибо за помощь, а не подскажите, как сделать, чтобы кнопки были одного размера?

        Ответить
  • Человек: 28 мая, 2013 в 02:14

    Скажите пожалуйста как сделать так чтоб видео в модальном окне останавливалась при выходе из него?? заранее спабибо

    Ответить
    • driver: 28 мая, 2013 в 15:34

      Здравствуйте.
      Добавьте ссылке кнопки «Закрыть» окна с видео событие onclick = "document.location.reload()". Наверное не самое лучшее решение, но работает. В html вся конструкция кнопки «Закрыть» будет выглядеть так: <a class="close" title="Закрыть" href="/" onclick = "document.location.reload()" rel="nofollow"></a>

      Ответить
      • Alexander: 8 июня, 2013 в 21:27

        Да, теперь работает! Только не срабатывает если кликнуть не по кнопке, а рядом с окном!

        Ответить
  • Аскар: 3 июня, 2013 в 17:08

    Огромное спасибо! Яваскрипт не всегда срабатывает корректно, а тут простое и изящное решение!

    Ответить
  • Евгени: 5 июня, 2013 в 11:14

    Спасибо, товарищ, ты делаешь хорошее дело! Подошел скрипт 100 %!

    Ответить
  • Andrey: 21 июля, 2013 в 15:49

    Подскажите, как сделать чтоб по переходу на target=”_blank” с ссылки в модальном, осуществлялся переход, а модальное в предыдущем окно закрывалось

    Ответить
  • Andrey: 22 июля, 2013 в 13:27

    Уже сам разобрался)

    Ответить
  • Мила: 19 августа, 2013 в 12:08

    Спасибо!

    Ответить
    • driver: 19 августа, 2013 в 14:49

      Пожалуйста! )))

      Ответить
  • imxo: 2 сентября, 2013 в 23:38

    создаю сайт и постала проблема прикрутить диалоговое окно и еще, что оно должно быть тез Кюри. Эти примеры не работают в ИЕ 7, но вот буду надеятся, что заработают в 9-ом! А так, примеры замечательны и доволи просты!

    Ответить
  • Azur: 24 сентября, 2013 в 21:32

    Спасибо!
    Очень легкий и приятный код )
    Только вопрос: как сделать, чтоб окошко появлялось непосредственно с ссылкой открытия? то есть задавались ему сразу стили отступов.

    Ответить
    • driver: 24 сентября, 2013 в 21:44

      Azur. За отзыв спасибо. А вот с постановкой вопроса сплошные непонятки. Зачем ссылке открытия модального окна появляться вместе с окном? Да и отступы все прописаны надежно и надолго в css )))

      Ответить
  • Андрей: 9 октября, 2013 в 13:19

    Отличная статья.
    Хотел «запихнуть» во всплывающее окна карту от google.
    не знаю, как подступиться. Буду признателен за совет.

    Ответить
  • Андрей: 9 октября, 2013 в 14:22

    Спасибо. Разобрался. Сначала спрашиваем, затем думаем, затем делаем.

    Ответить
    • driver: 9 октября, 2013 в 17:32

      Лучше и не скажешь 🙂 За интерес к статье, отдельное спасибо.
      Удачи!

      Ответить
  • Александр: 19 октября, 2013 в 19:36

    Здравствуйте, не могли бы Вы подсказать как можно привязать Ваше модульное окно к моему сайту, сам пробовал ни чего не вышло. Я хотел его использовать как увеличение картинки товара и сделать из него «быстрый просмотр товара». Но не получается привязать к id товара. Честно сказать затупил. Может поможете, что нужно сделать. Сей час когда я пробовал он вытаскивет первую картинку с id=1. Спасибо за помощь.

    Ответить
    • driver: 19 октября, 2013 в 22:36

      Здравствуйте, Александр.
      Какой бы то ни было автоматической фильтрации содержания модальных окон не предусмотрено, все нужно прописывать руками в вашем случае. Ссылку на вызов модального окна, например, название товара выполняете как в статье, уменьшенная картинка или кнопка «Подробнее», связываете через атрибут 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>
      Попытался на уровне телепатии, если не смог помочь извините, чудеса не мой профиль. Вообще у вас много чего там уже подключено, только вот не работает(((.
      Удачи!

      Ответить
  • Alexander: 14 ноября, 2013 в 05:50

    Всем привет! Всё отображается хорошо, вот только у меня после закрытия окна с видео, это окно продолжает жрать память, проц и сеть- хотя самого окна уже не видно. А если это окно открыть второй раз, то этот ролик продолжается с того места на котором я закрыл окно. Как это исправить? У меня установлены: Windows 7 x64 bit, Opera 12.02, FlashPlayer 11.5…

    Ответить
    • driver: 14 ноября, 2013 в 21:17

      Пока не разобрался с этим багом. Воспроизведение видео останавливается именно через плеер, а не при закрытии окна, что конечно не очень удобно. Перезагрузка страницы решает все проблемы с продолжением воспроизведения, ролик возвращается в начальное положение.
      Вообще видео встраивал лишь для примера функциональности модального окна. Раз есть вопросы, значит стоит заняться решением. Надеюсь и читатели блога подключатся к работе. А пока останавливаем видео в плеере, затем лишь закрываем окно )))

      Ответить
      • Alexander: 16 ноября, 2013 в 00:42

        Привет! Вот в этом вашем примере(dbmast.ru/vstraivaem-video-v-modalnoe-okno) видео останавливается при закрытии окна, может оттуда что нибудь взять и вставить в этот пример, или как нибудь привязать кнопку «закрыть окно» к кнопке «стоп» на плеере или к перезагрузке страницы. Например при закрытии окна сначала сначала срабатывает кнопка «стоп» на плеере, а потом закрывается окно, или сначала срабатывает кнопка «закрыть окно» а потом перезагрузка страницы.

        Ответить
  • Петр: 18 декабря, 2013 в 21:20

    Спасибо за статью — очень качественная:)
    Подскажите, пожалуйста, как сделать так, чтобы окно всплывало в центре экрана?..

    Ответить
    • driver: 18 декабря, 2013 в 21:56

      Петр, Здравствуйте.
      Специально проверил во всех браузерах(мне доступных), окно всплывает там где ему положено по настройкам, в центре экрана, разве чуть ближе к верхнему краю

      Ответить
  • Павел: 23 декабря, 2013 в 12:21

    Здравствуйте. Спасибо за столь отличное решение.
    У меня маленькая проблемка, может сможете подсказать,
    все работает отлично, только при появлении окна, не затемняется меню на сайте.
    Его так же отлично видно, как и само окно…

    Ответить
    • driver: 23 декабря, 2013 в 12:56

      Обратите внимание на значение свойства z-index: 1 в секции .overlay стилей модального окна.

      Ответить
      • Павел: 23 декабря, 2013 в 13:16

        Ой спасибо. Верстаю редко, вылетело из головы свойство…

        Ответить
  • Татьяна: 6 февраля, 2014 в 15:09

    Здравствуйте! Отличное решение для всплывающих окон, большое спасибо!!!
    Подскажите пожалуйста. У меня на страничке несколько кнопок вызывающих одну и ту же обратную связь (на всплывающем окне), расположены они на неком расстоянии друг от друга. Как можно сделать так чтоб окно всплывало всегда только в области кнопки его вызова? У меня окно всплывает только там где расположен блок модального окна. И выходит так что кнопку я жму далеко в конце страницы, а окно всплывает в начале (там где расположен). Возможно ли решить такую проблему?

    Ответить
    • driver: 6 февраля, 2014 в 23:43

      Здравствуйте, Татьяна.
      По умолчанию для .popup я установил абсолютное позиционирование position: absolute;, измените его на фиксированное position: fixed; и окно будет появляться ровно по центру, при любом раскладе страницы.

      Ответить
      • Татьяна: 9 февраля, 2014 в 12:58

        Спасибо)

        Ответить
  • Евгений: 7 февраля, 2014 в 02:23

    Здравствуйте, сделал все вроде правильно, но при закрытии окна, ролик продолжает играть, как исправить?

    Ответить
    • driver: 7 февраля, 2014 в 03:16

      Извините Евгений, но мне отсюда как-то и не видно, хотелось бы хоть немного конкретики. В примере, да и не только, всё работает без какой-либо магии. Опишите проблему, обязательно помогу.

      Ответить
      • Евгений: 7 февраля, 2014 в 03:30

        Можете дать контакты пожалуйста?

        Ответить
  • Сергей: 8 февраля, 2014 в 18:22

    Здравствуйте! Очень понравилось спасибо. Только хотелось подключить чтобы сразу появлялось окно при заходе на сайт. Если это возможно сделать то напишите пожалуйста.
    С уважением спасибо!!!

    Ответить
    • driver: 8 февраля, 2014 в 20:55

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

      Ответить
  • Cheshir: 10 марта, 2014 в 14:29

    Спасибо большое за новость )))
    Нет ли возможности прокрутки для всплывающего окна?
    Если фото слишком большое например

    Ответить
    • driver: 11 марта, 2014 в 03:46

      В конкретном решении, упор был сделан именно на автоматическую подстройку масштабных изображение под размеры окна, т.е. при установленной максимальной ширине окна max-width: 600px; встроенное изображение будет выводиться с учетом этого значения, минус внутренние отступы, сделано это как раз для того чтобы избежать использования полос прокрутки. Если вам так необходимо видеть полосы прокрутки, то используйте свойство overflow:auto; или overflow:scroll;, только вот от кнопки закрытия в данной конструкции придётся отказаться или полностью менять всю структуру вывода и позиционирования окон с кнопкой закрытия.
      У каждого решения существуют те или иные цели и задачи, конечно хотелось бы найти универсальное, но это практически невозможно, потому как сколько пользователей, столько и различных требований. Каждый эксперимент или очередная разработка — это интересный, но в тоже время трудоёмкий процесс, так что пока только так )))

      Ответить
  • Андрей: 13 марта, 2014 в 10:49

    Здравствуйте!
    не могли бы вы подсказать, как сделать следущее: есть небольшой текст, при нажатии на ссылку «Подробнее» во всплывающем окне показывался бы основной текст с картинкой. Я понимаю, что ваш код должен подходить для исполнения данной задумки, но не понимаю куда вставлять html код. Не судите строго.

    Ответить
    • driver: 13 марта, 2014 в 16:08

      Здравствуйте, Андрей.
      Вся конструкция будет следующая:

      <!– Ссылка на вызов первого мод.окна –>
      <a href=”#win1″ class=”button button-green” rel=”nofollow”>Подробнее &raquo;</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”>Подробнее &raquo;</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" — Фиолетовый
      Удачи!

      Ответить
      • Андрей: 14 марта, 2014 в 03:47

        Спасибо за подсказку. А зачем прописывать rel=”nofollow”? У меня в окне будет не дублированный текст. Как вы думаете, а поисковики будут индексировать текст во всплывающем окне?
        Как я понял эту конструкцию на вызов модального окна необходимо просто вставить в текст, в том месте где я хочу вывод окна, а стили прописать в файле CSS , так? Извините за массу может быть не самых умных вопросов.

        Ответить
  • Тарас: 22 марта, 2014 в 18:06

    Добавил в блок с 1-м товаром ссылку на всплывающее окно с инфо о доставке и оплате:
    ga100.casio55.com
    Пробема в том, что прокрутка не осуществляется внутри самого всплывающего окна и весь текст не попадает на экран. Что нужно изменить в стилях, чтоб появилась прокуртка внутри самого окошка?

    Ответить
    • driver: 22 марта, 2014 в 20:59

      Поместите все содержание внутри модального окна в дополнительный 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; я указал лишь в качестве примера, выставляете своё и радуетесь модальному окну с полосой прокрутки. Думается мне что всё же зря я не разъяснил в статье возможность внесения таких изменений.
      Удачи!

      Ответить
      • Тарас: 22 марта, 2014 в 21:19

        Что-то совсем некрасиво получилось. Это у меня в самом содержимом окна проблемы или что-то ещё подстроить нужно?

        Ответить
  • Тарас: 22 марта, 2014 в 23:12

    Спасибо огромное!!!
    Особенно за оперативность и конкретику!!!

    Ответить
    • driver: 22 марта, 2014 в 23:39

      Рад, что у вас всё получилось.

      Ответить
  • Валентина: 2 апреля, 2014 в 19:18

    Все очень классно!
    Но почему опера не открываются эти окна…

    Ответить
    • driver: 6 апреля, 2014 в 18:39

      Здравствуйте Валентина.
      Значит именно у вас неправильная Opera))) Всё и везде открывается и закрывается, проверенно не раз!!!!

      Ответить
      • Vika: 16 апреля, 2014 в 13:06

        Если в Opera (версия 12.11, в более новой не пробовала) кликнуть на надписи на кнопке («Открыть окно 1», например), то окно не откроется. Если попасть не в область надписи, а на саму кнопку, то откроется.

        Ответить
  • Михаил: 19 апреля, 2014 в 10:48

    Как Вы осуществили закрытие модального окна в любом месте посредством CSS?. Смотрел Ваш код, но не нашёл.

    Ответить
    • driver: 19 апреля, 2014 в 11:42

      Здравствуйте, Михаил.
      Всё очень просто, 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>

      всё будет прекрасно работать, но окно будет закрываться только по нажатию на кнопку закрыть.
      Удачи!

      Ответить
      • Михаил: 19 апреля, 2014 в 11:59

        Спасибо, driver!
        Сейчас попробую.

        Ответить
      • Михаил: 19 апреля, 2014 в 13:38

        Идею Вы мне подали закрытия окон в произвольном месте, но реализовал её по своему и получилось.
        Не получается сделать только плавное выпадение меню и появление модальных окон. Не могли бы Вы посмотреть мою реализацию… да и просто похаить моё творение)))

        Ответить
  • Сергей: 19 апреля, 2014 в 14:35

    Добрый день.
    Подскажите пожалуйста, как можно сделать полосу прокрутки в Ваших окнах?

    Ответить
    • driver: 19 апреля, 2014 в 15:30

      Здравствуйте, Сергей.
      Я уже отвечал по поводу полосы прокрутки в комментариях: См. Здесь

      Ответить
  • Сергей: 19 апреля, 2014 в 16:26

    Спасибо большое и прошу прощения за мою невнимательность. Все получилось.

    Ответить
  • Александр: 28 апреля, 2014 в 05:39

    Сделал модальное всплывающее окно по вашеу примеру! Получилось очень хорошо!
    В окно вставил форму компонента RSform Pro, все работает хорошо, но сообщение благодарности скрывается после того, как клиент нажимает кнопку отправить.
    Подскажите как сделать, что бы окно не скрывалось после нажатия кнопки «Отправить»?

    Ответить
    • driver: 28 апреля, 2014 в 10:53

      Ни чем не могу помочь, так как не знаю какой обработчик у вас задействован, как он настроен на действия после отправки сообщения, любая кнопка внутри блока модального окна никак не влияет на его закрытие, закрывается окно только по кнопке закрыть или при клике вне окна, во всех других случаях происходит перенаправление по адресу ссылки в кнопке, если не задан target="_blank" (открывать ссыль в новой вкладке) и т.д. Что должен увидеть пользователь после отправки сообщения, какая инфа должна выводится, и вообще уходят ли сообщения, наконец, что у вас прописано в атрибуте action="" тега form? Обработчик формы в этом случае играет не последнюю роль, может он перезагружает страницу и т.д. и т.п… Мне трудно давать советы, не обладая способностями телепата)))

      Ответить
      • Александр: 28 апреля, 2014 в 15:15

        Спасибо за ответ! Тут нужно работать именно с формами, а не модальным окном.

        Ответить
  • Вова: 25 мая, 2014 в 15:59

    Просто не представляете как меня выручили!)) Громаднейшее спасибо!)

    Ответить
  • Дмитрий: 29 мая, 2014 в 18:23

    Отличные примеры! Но есть большой минус, при увеличении (ctrl + «+») выглядит неприятно. Исправьте этот баг.

    Ответить
    • driver: 1 июня, 2014 в 21:21

      Здравствуйте, Дмитрий.
      Не заметил ничего неприятного при масштабировании страницы. Мне не совсем понятно, что вас не устраивает.

      Ответить
  • Михаил: 4 июня, 2014 в 16:44

    А как сделатьтак? если имеется:
    Сходу не получилось заделать модальное окно по нажатию кнопки submit

    Ответить
  • Назим: 22 июня, 2014 в 15:47

    Добрый день. Можно ли каким-то образом в примере с видео сделать так, чтобы оно прекращало проигрываться при закрытии без перегрузки страницы?

    Ответить
    • driver: 23 июня, 2014 в 22:49

      Назим. День добрый.
      К сожалению у меня нет на сегодняшний день стопроцентно рабочего решения, без перезагрузки страницы.

      Ответить
  • Илья: 25 июня, 2014 в 15:18

    Здравствуйте! В IE окно прижимается к левой стороне браузера, как решить эту проблему?

    Ответить
    • driver: 25 июня, 2014 в 18:27

      Здравствуйте, Илья.
      Это моя ошибка, при очередной модификации не указал определённое значение для ширины модального окна в CSS. Чтобы исправить положение окна, достаточно в селекторе .popup прописать нужное вам значение ширины мод.окна, в демо-версии использую: width: 600px;, вы можете выставить любое другое. В этом случае окно будет появляться там где ему положено, т.е. точно посередине. Спасибо, что указали на ошибку.

      Ответить
  • Вячеслав: 28 июля, 2014 в 23:09

    Вопрос а как сделать что бы текст прокручивался в открытом окне????

    Ответить
  • Вячеслав: 28 июля, 2014 в 23:11

    сори нашел!!!!

    Ответить
  • Вячеслав: 31 июля, 2014 в 19:49

    Привет помогите ,кнопка не краситься и прокрутка не получаеться ,перестает работать и текст пропадает

    Ответить
    • driver: 31 июля, 2014 в 21:05

      Чем же я вам помогу не видя пациента? )))

      Ответить
      • Вячеслав: 2 августа, 2014 в 18:20

        как отправить тебе код?? у меня фигня получаеться??

        Ответить
      • Вячеслав: 2 августа, 2014 в 18:52

        сайт lc-zarnica.ru

        Ответить
      • Вячеслав: 3 августа, 2014 в 19:17

        Спасибо большое!!!!!!!!

        Ответить
  • Александр: 7 августа, 2014 в 11:39

    Спасибо!
    Очень доходчиво и понятно. Получилось с первого раза!)

    Ответить
  • Константин: 11 августа, 2014 в 23:02

    Спасибо! Просто и понятно! Здорово!

    Ответить
  • Мейлис: 12 августа, 2014 в 13:30

    попробовал ваш метод, как только заменяю на свой текст модальные окна больше не появляются при нажатии, в чем может быть проблема?

    Ответить
    • driver: 12 августа, 2014 в 17:48

      Даже не представляю. Такого в принципе не может быть, если конечно, вставляя текст не нарушаете структуру html.

      Ответить
  • Семен: 18 августа, 2014 в 11:11

    Добрый день, подскажите пожалуйста, как сделать так, чтобы это окно само пропадало через 5 секунд после появления?(Автоматически закрывалось)

    Ответить
  • alesd: 19 августа, 2014 в 16:14

    Добрый день! Вставил данный код+ css в шаблон вордпресс, экран затемняется, окно не выводит. Пожалуйста подскажите в чем может быть причина?

    Ответить
  • alesd: 19 августа, 2014 в 16:42

    Не подскажите как в wp можно прикрутить выпадающее окно к одному из пунктов меню? Есть раздел онлайн-трансляция, при нажатии на который нужно, что бы выводилось всплывающее окно.

    Ответить
    • driver: 20 августа, 2014 в 01:47

      пропишите в href нужного вам пункта, id соответствующий идентификатору модального окна, например вот так:

      <a href=”#win1″ rel=”nofollow”>Онлайн-трансляция</a>
      <a href=”#win1″ rel=”nofollow”>Онлайн-трансляция</a>

      rel=”nofollow” не пишите, это у меня плагин все ссылки в комментах кроет))))

      Ответить
  • alesd: 20 августа, 2014 в 15:38

    Ниже приведен код с файла 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″

    Ответить
  • Роман: 22 августа, 2014 в 14:33

    Driver огромное спасибо!)) Я счастлив!!!

    Ответить
    • driver: 22 августа, 2014 в 22:11

      А я то, как рад!)))))

      Ответить
  • Мрак: 6 сентября, 2014 в 00:42

    А можно пример того как при нажатии кнопки в форме всплывало окно того что идет загрузка файла допучтим?

    Ответить
  • Игорь: 10 октября, 2014 в 16:05

    Добрый день. Спасибо за замечательную статью, очень помогла. Но не все так радужно, мне нужна ваша помощь. Я использовал попап на своем сайте (www.formprint.ru) для формы заказа (при нажатии на кнопку «заказать») В окне заказа 3D печати (formprint.ru/#win1) у меня есть спойлер с ценами.Как мне сделать так, чтобы при раскрывании спойлера увеличивалась высота попапа? А то получается, что у меня информация, после открытия спойлера, уходит за пределы формы. Буду очень признателен, если уделите время моей проблеме. Спасибо

    Ответить
    • driver: 10 октября, 2014 в 17:32

      Здравствуйте, Игорь. Вы, для модального окна прописали фиксированные размеры ширины и высоты непосредственно в 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;”>

      Проделайте это для всех используемых у вас на сайте модальных окон содержащих форму заказа.
      Удачи!

      Ответить
      • Игорь: 10 октября, 2014 в 23:58

        Спасибо за ответ, но когда я делаю height auto, у меня попап не умещается на страницу и получается, что информация в конце все равно не доступна и выглядит не эстетично, т.к. попап обрезанный получается. Что с этим можно сделать?

        Ответить
  • Максим: 18 октября, 2014 в 22:11

    Здравствуйте автор статьи driver!
    У меня к вам вопрос, и просьба о помощи в одном лице)
    Хотелось бы прикрутить регистрацию/восстановление пароля к такому виду всплывающего окна на wordpress. Прикрутил авторизацию самостоятельно, а вот на регистрацию и восстановление (+сообщения о неверности заполнения данных) знаний не хватает. =(
    Пожалуйста, помогите!

    Ответить
    • driver: 19 октября, 2014 в 00:15

      Максим, здравствуйте.
      Обратите внимание на новый плагин jQuery адаптивных форм регистрации и входа. Готовые формы с валидатором полей ввода, остаётся лишь правильно эти формы связать с функциями wp. Существуют и специальные плагины для WP, например SimpleModal Login, который добавляет всплывающую форму регистрации на WP-сайт. А мои окна, лучше всё же использовать, как информационный контейнер.

      Ответить
      • Максим: 19 октября, 2014 в 02:31

        Весьма благодарен. Думаю такой вариант, будет действительно эффективнее.)

        Ответить
  • Дмитрий: 1 ноября, 2014 в 10:28

    А как поменять название заголовка в окне поделиться,например в twitter, вместо «Что нового?» написать «Поделиться ссылкой с читателями» ?
    У меня вот такой код,где тут и как можно переименовать?

    Ответить
    • driver: 2 ноября, 2014 в 00:02

      Дмитрий, я ничего не понял? )))
      Напишите код, выделите и нажмите кнопочку «код» над текстовым полем комментирования.

      Ответить
      • Дмитрий: 2 ноября, 2014 в 00:25

        У вас на сайте к примеру кнопка twitter,там заголовок «Поделиться ссылкой с читателями» вместо «что нового?» как можно изменить этот заголовок?
        Вот код,может он не правильный,но окно открывается со своим текстом,просто заголовок хотелось бы изменить,как у вас на сайте

        Ответить
  • driver: 2 ноября, 2014 в 01:27

    Попробую догадаться, я так понял вас интересует подсказка к ссылке, если оно так, то просто замените текст в атрибуте title на свой, если титул у вас отсутствует в ссылке, то добавьте. Для просмотра наведите на ссылку ниже:
    Ссылка

    <a href=”http://twitter.com/dobrovoi” title=”Это пример ссылки ведущей в мой twitter. Сюда и пишите всё что вам нужно” rel=”nofollow”>Ссылка</a>
    <a href=”http://twitter.com/dobrovoi” title=”Это пример ссылки ведущей в мой twitter. Сюда и пишите всё что вам нужно” rel=”nofollow”>Ссылка</a>

    Ответить
    • Дмитрий: 2 ноября, 2014 в 02:17

      Нет,не ссылка а заголовок,посмотрите на фото,скриншот: mepic.ru/view/?id=9f3c62d…50ee2de73d5d7443
      У меня написано там «Что нового?» а хотелось бы изменить на «Поделиться ссылкой с читателями»как у вас.
      Скриншот моего кода: joxi.ru/8AnXRX7Fq491mO

      Ответить
      • driver: 2 ноября, 2014 в 04:40

        Понятно,))) это виджет кнопка от twitter, настраивается здесь, правда я не уверен, что вы сможете изменить там заголовок всплывающего окна при отправке твитта.

        Ответить
  • Марина: 8 ноября, 2014 в 15:40

    Добрый день driver))) Вот незадача(((
    Поставила ваше окно (CMC Joomla) Встало, появляется, но вот никак не могу понять почему оно прокручивается. Видна только часть окна. Пыталась поменять CSS? но результата нет. Посмотрите пожалуйста terraelectronic.ru (сайт в разработке)
    Страница в верхнем меню -Доставка. Внизу несколько кнопок — ЗДЕСЬ и Открыть окно1.
    Спасибо!

    Ответить
    • driver: 8 ноября, 2014 в 19:42

      Доброго времени суток, Марина.
      В окно вы помещает большой объём информации, блок растягивается и выглядит не очень эстетично. Исправить это можно задав фиксированный размер высоты окна, например 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;
      }

      Надеюсь всё у вас получится.

      Ответить
  • Марина: 9 ноября, 2014 в 01:49

    Доброй ночи! Сделала все по вашей рекомендации. Ничего! Окно зафиксировано и с места ни-ни. Может быть я не внятно выражаюсь((( Как я понимаю окно должно прокручиваться а страница под ним — нет. Всего текста все-равно не видно.
    Туплю(((
    Может где еще надо стили поменять.
    Только на это ваше окошка надежда. Так как, на скриптах окно не работает. Почему — не знаю. Да и Fancybox тоже не работает. Уже кучу инфы перелопатила и никак не выходит.
    Спасибо! Вы мне уже не первый раз помогаете)))

    Ответить
    • driver: 9 ноября, 2014 в 03:36

      Марина, это наверное я вас не понял, мы с вами сделали так чтобы всё содержимое умещалось в окне фиксированных размеров, добавили полосу прокрутки. Вам же видимо нужно, чтобы всё содержимое окна было на виду, а окно имело возможность прокручиваться вместе с содержимым страницы. Проделать это просто, достаточно изменить позиционирование окна с фиксированного position: fixed; на абсолютное position: absolute;, но тогда возникает другое препятствие для пользователей, если пользователь активирует окно находясь внизу страницы, он увидит нижнюю часть содержимого окна. Тем более вы разместили модальное окно внутри контейнера с контентом, надёжнее всё же вынести его за пределы базового контейнера(у вас это: <div id="back">) и подкорректировать значения позиционирования. А ещё лучше, конечно только на мой взгляд, оставить всё так как сейчас, т.е. модальное окно с полосой прокрутки, компактно, не отпугивает пользователя, и тем кому оно надо, воспользуются прокруткой. Всё познаётся в сравнении, попробуйте сменить позиционирование и всё поймете.

      Ответить
  • Михаил: 9 ноября, 2014 в 11:26

    Хотелось бы просто выразить БОЛЬШУЮ благодарность driver. Подписан на всё переписывание рубрики. Всегда интересно почитать и воспользоваться советами. И всегда не откажет driver в помощи. Ещё раз спасибо.

    Ответить
  • Марина: 9 ноября, 2014 в 14:05

    Добрый день! Ставила absolute;, все получилось. Но буду экспериментировать с css.
    Спасибо вам. Знаю, что вы всегда на связи)))

    Ответить
  • Марина: 9 ноября, 2014 в 15:31

    Не джумла, а песня души))) Допилила. Теперь окно исчезает не сразу))))))))))))
    Зацените пожалуйста, может ошибки где еще увидите terraelectronic.ru/dostavka Спасибо!

    Ответить
    • driver: 9 ноября, 2014 в 16:21

      Рад за вас))
      Отпустите форму чуточку ниже, задайте не 2 а хотя бы 10% от верха, и у свойства z-index измените значение с 10 на 99999, иначе окно перекрывается формой поиска в самой верхней позиции.
      Да, и всё таки уберите width: 100%; из раздела .popup, тогда при уменьшении экрана, окно будет изменяться более корректно.

      Ответить
  • Марина: 9 ноября, 2014 в 22:36

    Спасибо большое driver!

    Ответить
  • Александр: 14 ноября, 2014 в 18:05

    Доброго времени суток. Такой вопрос. Станет ли все это на сайт на 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>

    Ответить
  • Вадим: 14 ноября, 2014 в 20:21

    Здравствуйте,
    Если не сложно, подскажите пожалуйста,
    как грамотно исправить позицию появления окна?
    laplandcamp*com/zimavesna.php
    файл со стилями style.css лежит в корне
    Изображение помещается не полностью.

    Ответить
    • driver: 15 ноября, 2014 в 10:15

      Вадим. Здравствуйте.
      У вас окна выводятся относительно блока с содержанием div class=”art-content-layout-row” и отступ от «топа» у вас выставлен на 0px, соответственно окно и выводится относительно блока в котором расположено. Самый простой способ, отрегулировать с помощью значения свойства top в стилях окна .popup, например выставьте минусовое значение -60px или -80px. Не самое красивое решение, но рабочее, лучше конечно вынести блоки с содержанием модальных окон в район перед footer и посмотреть как будет работать, конечно не забывать при этом о значении top, регулируя его в ту или иную сторону. Выносите только дивы .popup, ссылки же на вызов окошек оставляйте там где они у вас положены.

      Ответить
  • driver: 15 ноября, 2014 в 01:07

    Здравствуйте, Александр.
    А чем по вашему отличается формирование стилей на сайтах php? Вся работа окон построена на css, остается правильно прописать html-каркас там где это вам необходимо.
    Для вставки сода в комментаримй воспользуйтесь кнопой «код», первый клик открывает а второй соответственно закрывает)))

    Ответить
  • Александр: 16 ноября, 2014 в 14:37

    Я немного в этом деле профан. Не могли бы вы мне подсказать как правильно прописать код на две картинки. Вот код

    Ответить
    • driver: 16 ноября, 2014 в 16:24

      Для вставки кода в комментарий, существует кнопочка волшебная под названием «Код», прямо перед глазами, а так же, перед отправкой коммента, можете проверить что получится, нажав ещё одну кнопочку, не менее волшебную, под названием «Предпросмотр»
      Увижу ваш код, обязательно помогу, а так, я не волшебник, кнопки, вот они волшебные))))

      Ответить
  • Александр: 17 ноября, 2014 в 14:25

    Вот наконец вставился. Как правильно прописать две картинки?
    <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>

    Ответить
    • driver: 17 ноября, 2014 в 15:52

      Вставился))) И что мне с ним делать? Что в конце концов вас интересует то? Вижу два файла изображения, за каким то лешим, обнесённые тегом <strong>, вижу скрипт шары от димокса. Тупо не врублюсь никак, что вы хотите то и причем здесь модальное окно? Вы хотите чтобы одна картинка открывалась в модальном окне, по клику на другую или ЧЁ-о?

      Ответить
  • Jack: 22 ноября, 2014 в 15:04

    Урок ниочем. Те, кто смогут в этом разобраться — смогут и сами это сделать без подсказок. А для новичка с этого урока помощи ровно ноль.

    Ответить
    • driver: 22 ноября, 2014 в 17:28

      В чём проблема то? Не читайте раз не интересно. Или предложите своё решение, а так, много вас таких оценщиков распальцованных бродит.
      Кто сможет разобраться конечно разберутся, кто бы спорил. А для новичков полный расклад и html и css, а если возникают вопросы, они их задают в комментариях и получают нужные разъяснения.
      Меня всегда интересует вопрос, чем такие как вы руководствуетесь. Ни какой конструктивной критики или указаний на ошибки, ни каких интересный идей в комментах, а только элементарный высер. Нужно хотя бы пытаться иногда уважать чужой труд…
      У меня всё!

      Ответить
  • Татьяна: 24 ноября, 2014 в 05:44

    Спасибо огромное!!Все прекрасно работает!

    Ответить
    • driver: 29 ноября, 2014 в 10:37

      Рад, что у вас всё получилось.

      Ответить
  • terabait: 29 ноября, 2014 в 18:48

    Здравствуйте, окно появляется под меню на сайте…
    Как исправить?
    И как сделать, что бы оно автоматически закрывалось после нажатия на кнопку отправить.
    Окно используется для заказа обратного звонка.

    Ответить
    • driver: 29 ноября, 2014 в 23:04

      Попробую на уровне телепатии.
      Если ваша кнопка используется, как самостоятельная единица, а не как элемент формы, то попробуйте закрыть окно через событие onclick="document.location.reload()" добавив его к тегу вашей кнопки input или button (от сюда просто не вижу…) В этом случае соответственно будет происходить перезагрузка страницы, следовательно метод неочень, но работает, проверьте отправку данных при этом.
      Окно всплывает под меню
      Если имеется ввиду, что меню сайта накладывается на окошко, то скорее всего смотрите значения свойства z-index, в css примера выставлены от фонаря, так как особой надобности в регулировках небыло. Увеличьте значения, для .overlay и .popup, например:
      z-index: 9999; и z-index: 10000;
      Гадать — занятие трудное, да и чаще всего мимо )))

      Ответить
  • Татьяна: 30 ноября, 2014 в 05:00

    Здравствуйте. Подскажите, а в какую папку закинуть скаченный фаил style?

    Ответить
    • driver: 30 ноября, 2014 в 08:28

      Здравствуйте, Татьяна.
      Если вы собираетесь использовать окна на готовом сайте, то у вас уже есть файл стилей, весь style.css примера вам не нужен, а только кусок после комментария /* Базовые стили модального окна */ до @media only.... Копируете правила и вставляете в свой файл стилей, у вас он здесь: /templates/HotGirls/css/style.css.
      Желательно всё это проделывать на локалке, для тестирования, а судя по вашему вопросу, на работающем сайте сами не экспериментируйте всё же.

      Ответить
  • Татьяна: 30 ноября, 2014 в 10:49

    А вы не могли бы мне помочь? ))) Я в этом мало чего понимаю. Понравилось как сделали на этом сайте http://www.igratvonline.ru/brodilki/…lt-course-2.html если кликнуть по большой картинке откроется игра. Вот тоже так хочу. Может я вам скину фаил style, а вы мне его подредактируете? И какой код мне нужен, чтоб при клике на картинку открылась игра?

    Ответить
    • driver: 30 ноября, 2014 в 12:31

      На сайте, что вы привели в пример, используется плагин 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 каждого окна и так с каждой игрой
      Всё это если вкратце, теперь зацените объём работы и задайте вопрос, а оно того стоит?

      Ответить
  • Роберт: 2 декабря, 2014 в 18:23

    Здарвствуйте, у меня такая проблема. Установил всплывающее окно, все работает. Как только подключаю язык jquery, всплывающее окно оккрывается а вот закрыть не получается, подскажите пожалуйста что делать?

    Ответить
    • Роберт: 2 декабря, 2014 в 18:51

      Если быть точнее, то конкретно я подключаю скрипт jquery для плавной прокрутки, называется он ScrollTo.

      Ответить
      • driver: 3 декабря, 2014 в 00:33

        Здравствуйте.
        Даже представить не берусь, окна написаны на чистом CSS, js никак на них не должны влиять, если только не конфликтуют адрес ссылки закрытия href="#close" и обработчик скролинга, так как в обоих случаях используется #, попробуйте для начала оставить якорь ссылки пустым(что не есть правильно, по ряду причин), так хотя бы выявите причину. Далее нужно будет уже прикручивать события js и т.д. а это уже другая история, легче модальное окошко на jQuery забабахать тогда))))

        Ответить
  • NeedHate: 4 декабря, 2014 в 12:31

    $(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=#]), тогда будет всё отлично работать.

    Ответить
    • driver: 4 декабря, 2014 в 15:25

      Спасибо за своевременное и оч. нужное дополнение))

      Ответить
  • Владимир: 9 декабря, 2014 в 19:07

    При загрузке страницы видно div с инфой долюсекунды , если подключена Jquery то всё ок .

    Ответить
    • driver: 9 декабря, 2014 в 20:29

      И как это вы только усмотрели ))). Хотелось бы посмотреть, да боюсь я не узрею. А по существу, всё логично, для скрытия мод. окошка используется связка visibility и opacity, от второго можно отказаться и посмотреть что получится в итоге. На каком этапе может быть задержка и как влияет подключение jQuery, для меня загадка, которую решать нет особой необходимости, потому как не критично, да и задержки могут происходить ведь исключительно на вашей стороне. Но все же спасибо, возьму на заметку и протестирую ещё раз по-полной.

      Ответить
  • Андрей: 18 декабря, 2014 в 14:42

    Аналогично «При загрузке страницы видно div с инфой долю секунды»

    Ответить
    • driver: 18 декабря, 2014 в 15:52

      Просто уберите или уменьшите задержку перехода transition: all ease .5s; и все! Да и хотелось бы чтобы вы уточнили в каком браузере наблюдается сея трабла))) буду разбираться

      Ответить
      • Андрей: 18 декабря, 2014 в 16:50

        FF34, win8.1, буду пробовать

        Ответить
  • Vitaliy: 19 декабря, 2014 в 14:03

    Подскажите, пожалуйста, как сделать всплывающее окно при первом посещении сайта. Спасибо.

    Ответить
    • Vitaliy: 19 декабря, 2014 в 14:11

      Извините, уже нашел dbmast.ru/sozdaem-vsplyva…mnogo-javascript

      Ответить
  • гарри: 25 декабря, 2014 в 00:29

    Спасибо за статью!
    Решил попробоватьЮ дабы разобраться с мехагизмом детально.
    Работает, но на странице, где тестил, есть меню и оно при проходе мыши по popup окну просвечивает с возможностью клика.
    Вопрос простой: почуму такой эффект и как избавиться от него?

    Ответить
    • гарри: 25 декабря, 2014 в 00:45

      Решил проблему: z-index…
      Но есть ещё одна:
      как передать текст в попап окно?
      Понимаю, что вопрос «неуместен» м многие обычно посылают … к документации. Но почему-то архи сложно понять принципы взаимодействия html и js, отсюда и вопрос.

      Ответить
      • driver: 25 декабря, 2014 в 04:16

        У на так всегда, сначала задаём вопрос, потом сами же на него и находим ответ))
        Второй вопрос что то не догоняю, в смысле: как передать текст в попап окно? Чаще всего это делается руками, в редакторе, а принципы работы js и html в один коммент сложно будет уложить)))

        Ответить
  • Ертай: 9 февраля, 2015 в 09:38

    Добрый день, мне понравилось демо версия, хотел бы сделать себе на сайт, но не знаю как проработать его в ОПЕНКАРТЕ?, подскажите пожалуйста…

    Ответить
  • Алексей: 8 марта, 2015 в 03:19

    у вас так:
    <a href="#win1" class="button button-green">Открыть окно 1</a>
    как открыть из JavaScript?

    Ответить
    • driver: 8 марта, 2015 в 18:17

      Такой же вопрос: из какого javascript?

      Ответить
  • Алексей: 9 марта, 2015 в 01:07

    <script>
    function openPopUp(){
    // здесь нужно открыть всплывающее окно
    }
    </script>

    спасибо

    Ответить
    • driver: 9 марта, 2015 в 04:12

      Это то всё понятно, не понятно к чему вы хотите привязать функцию, т.е. окно открывается по удару на кнопке/ссылке, или же всплывает самопроизвольно с некоторой задержкой при загрузке страницы, какой вам нужен функционал в итоге? Подгружать в диалоговом окне страницу 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.

      Ответить
  • Алексей: 9 марта, 2015 в 14:45

    Ок. Поясню свою задачу. Имеется таблица, в ней данные. Для каждой строки таблицы имеются кнопки (button), которые удаляют либо редактируют данные (запись) в таблице. При нажатии кнопки «Редактировать» должно показываться всплывающее окно, в котором данные записи редактируются, при нажатии в этом окне «Сохранить» а) через DOM обновляются данные в таблице б) форма с измененными данными отправляется через ajax на сервер.
    Соответственно window.open не подходит, т.к. необходимо изменять содержимое DOM текущего окна. Ваш вариант всплывающего окна CSS как раз для этого случая удобен.
    Можно конечно вместо button использовать ссылки, но этот вариант мне не кажется правильным (стараюсь не использовать варианты подобные href=”#”, т.к. ссылки должны содержать URL, по которому ссылку можно открыть например в новом окне).
    Таким образом, меня интересует каким образом, можно из кода JS показать окно CSS из Вашего примера.

    Ответить
  • Алиска: 12 марта, 2015 в 22:55

    Огромное человеческое СПАСИБО за статью!!!!!!!
    Конечно пришлось долго копатья, чтобы дойти до сути, но это стоило того!!!! Да здравствуют всплывающие окна на чистом css!!! Да здравствует Андрей doborovoi!!! Ура товарищи!!! *смайлик с флажками*
    =D

    Ответить
    • driver: 13 марта, 2015 в 00:00

      Спасибо, Алиска, повеселили))) Только всё же не стоит забывать, что метод не лишён недостатков, свистопляски с кроссбраузерностью, мобильные устройства опять же вносят свои коррективы

      Ответить
  • Влас: 22 марта, 2015 в 12:18

    Здравствуйте, у меня такая проблема, поставил код на текст в меню. То есть хочу, чтобы при нажатии на текст «Контакты» выскакивало окно.
    Все настроил все работает, но только когда нажимаю на контакты то есть http://www.сайт.ру/win1 ничего не происходит, а если обновляю страницу по этому адресу то окно появляется.

    Ответить
    • driver: 22 марта, 2015 в 13:29

      Здравствуйте.
      Просто уберите из ссылки адрес сайта, оставьте только идентификатор #win1
      Получится следующее:
      <a href="#win1">Контакты</a>
      И всё будет хорошо)))

      Ответить
      • Влас: 22 марта, 2015 в 15:10

        Так и стоит, но все равно не работает.

        Ответить
  • ALL: 27 апреля, 2015 в 18:21

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

    Ответить
    • driver: 27 апреля, 2015 в 18:59

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

      Ответить
  • Анатолий: 27 апреля, 2015 в 20:10

    Здравствуйте! Не подскажете ли, почему всплывающее окно , а точнее затемнение, не распространяется на input поиска? (opencart 2.0). по ссылке прикрепил скриншот)
    z-index ставил, ничего не меняется. сможете помочь?)

    Ответить
    • driver: 27 апреля, 2015 в 20:29

      Здравствуйте, Анатолий.
      Всё что вижу по скрину(пытаюсь догадаться), это input поиска наслаивающийся на фон затемнения, однозначно баг с z-index. Увеличьте значение по максимуму, например у фона сделайте: z-index: 9999;, а у модального блока: z-index: 10000;. Так же посмотрите у формы поиска, это свойство вообще присутствует или нет, обратите внимание и на !important.
      Истина где то рядом, только вот я не телепат, извините)))

      Ответить
      • Анатолий: 27 апреля, 2015 в 20:46

        Спасибо!, все работает. Пчмт думал, что диапазон значений z-index всего сотня)

        Ответить
  • Ден: 30 апреля, 2015 в 15:58

    А как сделать, что бы окно выплывало автоматически, через определенное время (к примеру через 15 секунд), и что бы в окне отображалась форма обратной связи? Я совершенно неопытный, по этому, буду признателен, за максимально подробную и полную информацию)))

    Ответить
    • driver: 30 апреля, 2015 в 18:05

      По этой теме у меня есть отдельный урок, посмотрите и всё поймёте: Тынц

      Ответить
      • Ден: 30 апреля, 2015 в 22:46

        Огромнейшее спасибо! Я хоть и не соображаю ничего в CSS, а сайт пишу по учебнику HTML, разобрался, и за пол часа сделал именно то, что хотел! Спасибо!!!

        Ответить
  • gelik: 30 мая, 2015 в 19:58

    спасибо, отличная статья, помогла
    подскажите, как мне можно закрыть модальное окно и убрать затемнение не нажимая на кнопку закрыть или куда-нибудь вне окна? У меня внутри модального окна форма и я хочу после успешной отправки данных закрыть окно и убрать затемнение
    я так понимаю все дело в стилях, но если сделать что-нибудь вроде — document.getElementById (‘win1′).style.display=’none’; и т.д, то при следующей попытке открыть это же окно, оно уже не будет показано, т.к. display=’none’, вот хотелось бы реализовать такое же поведение, как если бы я нажал закрыть модальное окно.

    Ответить
  • gelik: 30 мая, 2015 в 20:03

    а, все, вопрос исчерпан, извините)

    Ответить
  • Вадим: 8 июня, 2015 в 22:36

    Не подскажите, как содержимое это всплывающего окна можно отправить на печать?

    Ответить
    • driver: 8 июня, 2015 в 22:47

      Выделить, ударить правой кнопой и нажать слово «Печать» ))

      Ответить
      • Вадим: 9 июня, 2015 в 00:24

        А серьёзно? Это открывшееся окно вообще на печать не выводится.

        Ответить
  • spirit: 24 июня, 2015 в 09:54

    Здравствуйте!
    В вашем примере окно всплывает по ссылке
    <a href="#win1" class="button button-green">Открыть окно 1</a>
    как открыть по кнопке, событие onclick?
    <INPUT TYPE=submit id="" class="button_1_1" NAME="enter" VALUE="Вход" onclick="">

    Ответить
  • Олег: 27 июня, 2015 в 01:45

    Всем привет, и спасибо за прекрасную статью! Я не пойму как сделать так чтобы окно вылазило когда хотят закрыть страницу не подскажите?

    Ответить
  • Маша: 29 июня, 2015 в 12:19

    Косяк был обнаружен при выводе изображений. В общем окно уезжает за пределы экрана. Решил просто, поставив вместо 20% отступа — 5%. Но скорее всего, тут проблема в моем 15.6 экране. Думаю, надо будет предусмотреть просто изменение формата изображения в зависимости от экрана. Да, еще один момент. Всплывающие окошки шикарно работают на мобильных устройствах. За это огромное спасибо.

    Ответить
  • виктор: 5 июля, 2015 в 20:40

    Здраствуйте а как зделать тоже самое только если ссылка вела на другой html, а не в этот же

    Ответить
    • driver: 9 июля, 2015 в 06:15

      Здравствуйте.
      Используйте внутри модального окна фрейм с любой страницы и всё.

      Ответить
      • виктор: 12 июля, 2015 в 19:16

        большое человеческое спасибо. правда я уже java skript научился использовать. но и ваш пример я тоже вставлю в свой сайт.

        Ответить
  • Андрей: 7 июля, 2015 в 01:14

    Огромное человеческое спасибо!!!
    не понял только одного момента (уж простите)
    кликая на кнопку вызова окна мы вызываем ссылку с соответствующим ай-ди
    а за ним уже идет див с содержимым окна…
    чем обусловлена эта ссылка?
    нельзя ли на прямую к диву?

    Ответить
    • driver: 9 июля, 2015 в 06:10

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

      Ответить
  • That: 9 июля, 2015 в 18:18

    .close:hover добавил text-decoration:none; теперь на мой взгляд лучше смотрится, Х без подчеркивания. А сам материал большое спасибо эффект афигенный, представляю ваш труд. И отдельное спасибо за кнопку Закрыть. Респект!

    Ответить
  • Air: 10 июля, 2015 в 19:44

    Thanks! 😉

    Ответить
  • Максим: 23 июля, 2015 в 13:39

    Огромное спасибо! Окна простые в реализации и отлично смотрятся!

    Ответить
  • Валера: 6 августа, 2015 в 13:59

    Спасибо

    Ответить
  • dendo: 7 августа, 2015 в 13:12

    Спасибо за пример. Однако я совсем не пойму каким образом происходит взаимодействие с div’ом. В ссылке нет на него никаких указаний. Выбирается первый div после ссылки. href=”#x” зачем нужен? и без него все работает? Можете подробнее объяснить что происходит, что и где вызывается и в какой последовательности.

    Ответить
    • driver: 7 августа, 2015 в 15:21

      Взаимодействие с div’ом прописано на стороне css, .overlay:target+.popup
      А на счёт href="#x" всё просто, считается, что пустой якорь href="#" не совсем «кошерно», да и при переходе прокручивает вверх страницу, если много контента.
      Можете совсем отказаться от ссылки, использовав всё тот же div с определенным CSS стилем, но тогда закрытие окна возможно будет только по клику на кнопке закрытия. Конечно, станцевав с бубнами и эту задачку можно решить, только вот нужно ли.

      Ответить
  • Андрей: 17 августа, 2015 в 14:15

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

    Ответить
    • driver: 17 августа, 2015 в 16:57

      Здравствуйте, тёзка.
      Если бы вы сделали именно так как у меня, всё бы работало, уж поверьте. Этому решению уже 3 года и за это время его раздербанивали на части, ковыряли код все кому не лень. Совместными усилиями было выявлено и исправлено ряд ошибок.
      Это всего лишь предложенный мной, ещё один оригинальный вариант, как им воспользуются люди в дальнейшем, я просто не в силах предугадать, тем более не видя, что и как человече проделывает с исходниками.
      Всё ведь очень просто. Берёте исходный код html и css, интегрируете в свой проект, при возникновении проблемы, описываете ёё как можно подробнее и я вам обязательно помогу. Очень часто ответ на свой вопрос можно найти в ранних комментариях, только кому оно надо читать какие-то комменты.
      Могу конечно ошибаться, но кажется вам следует взглянуть на один из комментов: Тынц
      Если вы используете у себя на сайте скрипт jquery для плавной прокрутки, конфликт возникнуть мог именно с ним. NeedHate дал по этому поводу исчерпывающие рекомендации.

      Ответить
      • Андрей: 24 сентября, 2015 в 14:37

        Спасибо, разобрался в проблеме. Все дело было в невнимательности =)

        Ответить
  • Максим: 21 августа, 2015 в 21:56

    Добрый день.
    Примеры — классные! В конечном итоге более впечатляют, чем на JS. Использовал пример с IFRAME. Заморочка с прозрачностью: где выставить параметры iframe, чтобы бэкграунд был от попап дива (div)? В iframe allowtransparency прописал, но эффекта нет. И не могу сообразить как прописать закрытие окна из содержимого iframe, по поиску только примеры с JS, если вопрос понятен, прошу помощи.

    Ответить
    • driver: 21 августа, 2015 в 22:53

      Здравствуйте, Максим.
      В селекторе .popup iframe пропишите background с нужным вам цветом. Если нужен прозрачный фон то используйте background-color:transparent, inherit
      наследует значения родителя, или же заливку в rgba, степень прозрачности регулируете последним значением, например при background: rgba(0, 0, 0, 0);, по идее, фон должен стать абсолютно прозрачным и будет соответствовать заливке дива попап.
      Что качается второго вопроса, даже как-то и не задумывался при написании статьи о таком функционале. Думается мне, что 100% рабочего решения на чистом css просто нет.

      Ответить
      • Максим: 23 августа, 2015 в 00:10

        Спасибо

        Ответить
  • Александр: 10 сентября, 2015 в 22:39

    Добрый день. А как можно передать параметры с основного окна в модальное окно?
    ?per2=$per1 в ссылке не работает.

    Ответить
    • Александр: 10 сентября, 2015 в 23:44

      т.е. у меня есть набор ссылок напротив каждого из товаров. И при нажатии на ссылку всплывает ваше окошко. Но я не знаю как предать в это окошко значение переменной — кода товара, напротив которого размещена ссылка.

      Ответить
      • Александр: 11 сентября, 2015 в 14:27

        Вышел из ситуации так: части названия окна присваиваю значение переменной и в код модального окна её уже передаю.

        Ответить
  • Иван: 17 сентября, 2015 в 14:05

    Добрый день!
    Спасибо за замечательное окошко!
    Не подскажете, у меня следующая ситуация:
    В модальном окне у меня стоит кнопка, которая отправляет данные формы, расположенной в основном окне, выглядит так:
    Однако, если данные, введенные в основном окне не верны (там стоит КАПЧА) — основное окно перезагружается, но вместе с ним снова выводится и модальное.
    Как сделать, чтобы модальное снова не выводилось в такой ситуации, после нажатия кнопки SEND?

    Ответить
  • Константин: 23 сентября, 2015 в 23:03

    СПАСИБО БОЛЬШОЕ! ВЫ БОГИ!

    Ответить
  • Веро: 29 сентября, 2015 в 13:44

    Почему-то не работает с Firefox и IE

    Ответить
    • driver: 29 сентября, 2015 в 19:00

      В Firefox всё прекрасно работает, в IE начиная с 9-й версии. Так как эта тема является одной из самых популярных в блоге, постоянно проверяю работу данного решения. Так что…

      Ответить
  • Веро: 5 октября, 2015 в 11:53

    Что может быть не так? У меня работает только в Хроме

    Ответить
  • Вячеслав: 14 ноября, 2015 в 20:22

    Здравствуйте. Хочу установить кнопки, как у Вас на демо. Но они через HTML не идут. Как их через гаджет установить. Извините, но еще не умею с кодами работать. Подскажите.

    Ответить
    • driver: 14 ноября, 2015 в 23:45

      Здравствуйте, Вячеслав.
      Набор кнопок CSS3 смотрите и забираете здесь. В статье я подробно рассказываю, как их использовать. Относительно применения в шаблонах Blogger, всё по накатанной, набор правил css кнопок, вставляете в режиме редактирования шаблона, в раздел <b:skin><![CDATA[ ... ]]></b:skin>, лучше всего перед тегом ]]></b:skin>, чтоб не потеряться в дальнейшем, сохраняете изменения и всё, остается только в гаджете разместить ссылку с классом соответствующим той или иной кнопке, например, для зелёной кнопы:
      <a href="#" class="button button-green">Кнопка</a>
      В атрибуте href="#" указываете нужный вам адрес, или если для вызова модального окна, идентификатор окошка. Всё!

      Ответить
  • Вячеслав: 17 ноября, 2015 в 12:16

    Спасибо большое. Доходчиво и понятно. Ну очень приятно что нашел Ваш сайт.Успехов.

    Ответить
  • Raistlin: 27 ноября, 2015 в 22:41

    Имеем: страницу на сайте со множеством ссылок. При нажатии некоторых ссылок используется вышеприведенное модальное окно. Так как ссылок много — модальных окон тоже может быть множество (десятки, а то и сотни).
    Задача: для того, чтобы не захламлять страницу кодом множества модальных окон можно ли код:
    <!-- Модальное окно №2 -->
    <a href="#x" rel="nofollow"></a>
    Здесь вы можете разместить любое содержание, текст с картинками или видео!
    <a title="Закрыть" href="#close" rel="nofollow"></a>

    хранить в отдельном .html откуда бы он подтягивался на основную страницу только при необходимости.
    Как это можно сделать на практике?

    Ответить
    • driver: 27 ноября, 2015 в 23:33

      Модальное окно в таком виде, как в примере, это всего лишь один div-контейнер. Даже если будет сотня таких блоков, особого захламления, как вы выразились, я не вижу.

      Ответить
      • Raistlin: 28 ноября, 2015 в 00:04

        Я о том, что при наличии допустим сотни модальных окон размер страницы будет ~1 мб, что приведет к задержке ее загрузки при медленном инете.

        Ответить
  • Владимир: 4 декабря, 2015 в 01:13

    Здравствуйте, есть страница-анкета с полями для заполнения. Как сделать, чтобы при нажатии на кнопку отправить одновременно:
    1 — анкетные данные отправлялись на емайл и;
    2 — появлялось модальное окно с текстом.

    Ответить
  • Юлия: 4 декабря, 2015 в 17:16

    А как сделать так, чтобы номер картинки менялся? я делаю фото-галерею

    Ответить
    • driver: 4 декабря, 2015 в 18:17

      Каждое модальное окно ( точнее 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 мод.окна с полноразмерным изображением

      Ответить
      • Юлия: 4 декабря, 2015 в 18:34

        То есть для каждой картинки нужно делать своё модальное окно?

        Ответить
  • Юлия: 4 декабря, 2015 в 19:46

    Спасибо вам большое!!! Мне очень помог ваш урок)
    pp.vk.me/c629320/v6293207…/s4gwsW82fwM.jpg
    только теперь ещё один вопрос: как «поднять» наверх окно? чтобы оно было по центру окна

    Ответить
    • Юлия: 4 декабря, 2015 в 19:52

      почему-то при изменении 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;

      Ответить
      • driver: 4 декабря, 2015 в 20:04

        В селекторе .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%; ), просто выставьте нужное вам значение.

        Ответить
  • Александр: 11 декабря, 2015 в 01:40

    сначала хочется сказать огромное спасибо за ваши труды ради нас) а можно подробнее о том как работает механизм закрытия окна? я просто понять не могу где описано действие которое должно произойти при нажатии на «#close»

    Ответить
    • driver: 11 декабря, 2015 в 09:32

      Сие действие нигде не описано, так как действием и не является, #close в адресе ссылки кнопки закрытия, конечно не совсем кошерное решение, но использовал его для общего понимания, ну и чтобы при закрытии не бросало на верх, если мод.окно выводится на странице с большим объёмом контента. Существуют и другие варианты, с точки зрения валидности, может и более правильные, но это уже совсем другая история…
      Обратите внимание на окно с видео, в поисках способа остановки проигрывания видеоролика при закрытии окна, использовал событие onclick тупо вызывающее перезагрузку страницы, более оптимального решения, у меня пока нет.

      Ответить
      • Александр: 11 декабря, 2015 в 11:24

        В любом случае Вы молодец раз занимаетесь написанием и главное поддержкой статей для совсем неопытных. при изменении позиционирования окна по центру начало «выплывать» с правого нижнего угла))) а «уходить» в левый верхний))). но это мелочи, Вы кучу времени не мне одному сэкономили!

        Ответить
  • Андрей: 13 декабря, 2015 в 20:11

    Спасибо большое!!!)

    Ответить
  • Андрей: 15 декабря, 2015 в 00:46

    Прошу прощения, Вы не могли бы подсказать, как использовать pic-left/-right для решения навигации в галерее? Я так понимаю, будет открываться основное фото, а по бокам в уменьшенном варианте предыдущее и последующее. Так вот, как бы куда это правильно вписать?..
    P.S.: понимаю, что напрягаю Вас, но я нуб и не спрашивал бы, если б разбирался.((

    Ответить
  • driver: 15 декабря, 2015 в 01:49

    Нет Андрей, вы не правильно поняли, классы pic-left и pic-right, прописал для использования миниатюр изображений в теле модального окна, с левым и правым позиционированием относительно текста соответственно. Для iframe и встроенного видео в модальное окно, так же определены правила. А на счёт галереи, вам лучше перелопатить другие мои обзоры: тынц >>

    Ответить
    • Андрей: 15 декабря, 2015 в 04:20

      спасибо))

      Ответить
  • Александр: 1 февраля, 2016 в 07:19

    Здравствуйте!
    Вот у меня проблема возникла с миниатюрой №5. Будто все делал по вашему коду, но дело в том, что я ставлю вторую картинку, а в сплывающем окне выходит предыдущая картинка, то есть та, что я помещал в первой миниатюре. Уже все пересмотрел и перипробывал, но проблема не решается.

    Ответить
    • driver: 1 февраля, 2016 в 13:22

      Копайте в сторону идентификаторов, у каждого окна свой id соответствующий ссылке на вызов окна, т.е. если в ссылке href="#win1", то и у модального окна id="win1", точнее у фона затемнения в виде ссылки, который в свою очередь связан с блоком модального окна через псевдокласс :target в css

      Ответить
      • Александр: 1 февраля, 2016 в 20:33

        Спасибо. И действительно. Вот это я протупил.

        Ответить
  • Денис: 1 февраля, 2016 в 14:11

    Картинка становится большой из-за вот этого кода в css
    /* изображения внутри окна */
    .popup img {
    width: 100%;
    height: auto;
    }

    Если картинками будете управлять по другому, просто уберите этот кусок

    Ответить
    • Александр: 1 февраля, 2016 в 21:38

      Да, Денис, спасибо!
      Этот момент я понял. Убирать совсем не стал — изменил размер.
      Вот многие уже говорили, а теперь и у меня проблема со скроллингом. Текст нужный большой, а прокрутка по человечески не работает.
      Народ, если кто придумает, напишите плиз!
      Давайте вместе доработаем этот супер попап! 🙂

      Ответить
      • driver: 1 февраля, 2016 в 22:40

        А что тут дорабатывать? По поводу полосы прокрутки писал в комментах не раз Тынц

        Ответить
  • Олег: 5 февраля, 2016 в 03:09

    Видео блок работает, но при выключении видео вне блока, просмотр прекращается, а звук продолжает воспроизводиться… Помогите.
    Спасибо.

    Ответить
    • driver: 5 февраля, 2016 в 20:28

      Самое простое, это оставить адрес ссылки выполняющей роль фона затемнения и связующего звена с модальным окном, оставить пустым:
      <a href="/" class="overlay" id="win3"></a>
      Конечно, это не самое кошерное решение и многие навороченные веб-мастера содрогнутся, но решение работает))).

      Ответить
      • Олег: 7 февраля, 2016 в 20:23

        Спасибо большое, помогло.
        А есть вариант такой, чтоб видео включалось автоматически. Я начинающий, буду благодарен за помощь.

        Ответить
  • Денис: 15 февраля, 2016 в 01:15

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

    Ответить
    • driver: 15 февраля, 2016 в 01:23

      Денис, спасибо за отзыв.

      Ответить
  • MAX: 15 марта, 2016 в 00:05

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

    Ответить
    • driver: 15 марта, 2016 в 01:40

      Не знаю, какие вкладки вы используете, например мои табы отлично вписываются и работают в модальном окне. Такое поведение (закрытие мод. окна) возможно при использовании вкладок в виде ссылок с атрибутом href="#", так как работа (активация) окон построена на использование псевдокласса :target

      Ответить
      • MAX: 15 марта, 2016 в 11:30

        Спасибо , попробую по другому 🙂

        Ответить
  • Силантий: 15 марта, 2016 в 17:44

    Добрый день! Очень понравилась эта тема. Сейчас как раз верстаю сайт, но делаю это на компе и просматриваю страницы в браузере. Скопировал Ваш код, разместил в корневой папке файлы css. Сначала всё работало, но потом перестала работать кнопка закрытия окна (крестик). А когда закрываешь видео, отправляет на страницу «страница не найдена». Под видео поставил кнопку закрытия с помощью . Сначала всё работало, но потом снова перестала откликаться кнопка закрытия на всех окнах. Подозреваю, что на хостинге всё будет работать. Но спешу уточнить, так ли это, и что делаю не правильно…

    Ответить
    • driver: 15 марта, 2016 в 23:09

      Доброго времени!
      Начну с того, что данное решение должно работать на локалке без проблем. При закрытии окна с видео, перебрасывало на отсутствующую страницу потому, что в демо, в кнопке закрытия использовал ссылку с адресом href="demo.html", дабы не прописывать пустую ссылку, такое вот кривоватенькое решение(тупо перезагрузка), для принудительной остановки проигрывания видео, другого, на чистом css, у меня (да и ни у кого) просто нет.
      По поводу не срабатывания кнопки, посмотрите, а не прописали ли вы в ссылку событие onclick="return false", которое используется в демке, в окне с видеороликом, для отмены перехода по ссылке.
      Якорь #close применяем для того, чтобы при закрытии не кидало вверх страницы, что происходит при использовании одного символа решетки #

      Ответить
  • Силантий: 16 марта, 2016 в 16:21

    Благодарю за оперативный ответ! Всё работает, и спасибо за тему — очень пригодилась!

    Ответить
  • Yura: 29 марта, 2016 в 09:20

    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;
    почему то нет задания высоты только ширина.
    Помогите с советом пожалуйста дельным.

    Ответить
  • Dimon: 25 апреля, 2016 в 22:00

    Красивое с видео, больше понравилось.

    Ответить
  • Ирина: 13 мая, 2016 в 12:58

    Профессиональная помощь студентам. Интересует всплывающее окно для сайта.

    Ответить
    • driver: 13 мая, 2016 в 22:08

      Если при загрузке сайта, то посмотрите такой вариант.
      Коллекция модальных окошек и форм здесь.

      Ответить
  • mozg: 26 июня, 2016 в 17:57

    использовал ваш код, огромное спасибо! только один вопрос:почему когда жмешь возврат на предыдущую посещенную страницу опять выскакивает модальное окно как избавиться от этого эффекта?

    Ответить
    • driver: 27 июня, 2016 в 01:14

      Потому что в адресе прописан id мод.окна href="#win1"
      Чтобы не устраивать танцы с бубнами, посмотрите вариант окошек на скрытых чекбоксах: Тынц>>

      Ответить
  • Alex: 26 июня, 2016 в 18:32

    Спасибо за вашу помощь!
    Но есть вопрос: информации в модальном окне много и по размеру окно растягивается вниз за границы экрана, а скролла-прокрутки нет. Что нужно сделать?

    Ответить
  • Alex: 26 июня, 2016 в 18:36

    Спасибо за помощь!
    Но есть вопрос: информации в модальном окне много, текст ниже видимой зоны прочесть невозможно, нет прокутки-скролла. Что надо сделать?

    Ответить
    • driver: 27 июня, 2016 в 00:51

      Здравствуйте, 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; я указал лишь в качестве примера, выставляете своё и радуетесь модальному окну с полосой прокрутки.

      Ответить
      • Alex: 27 июня, 2016 в 06:47

        Благодарю. С прокруткой все получилось.

        Ответить
  • Alex: 26 июня, 2016 в 18:42

    И еще интересует, как возможно модальное окно с формой обратной связи открывать в модальном окне? Т.е. сначала открываем информацию в модальном окне и в нем есть еще кнопка для формы (можно ли его открыть вторым модальным окном?)
    Или это слишком заморочно?

    Ответить
    • driver: 27 июня, 2016 в 01:03

      Возможно.
      Форму помещаете в мод.окно, например с идентификатором id="win1". Если кнопка для вызова формы в виде ссылки, указываете id в адресе:
      <a href="#win1" rel="nofollow">Открыть форму</a>
      При нажатии на кнопу, первое мод.окно закроется, а второе с формой, соответственно откроется

      Ответить
      • Alex: 27 июня, 2016 в 06:52

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

        Ответить
  • Kael: 5 июля, 2016 в 18:09

    Здравствуйте!
    Использовал Ваш код, делаю пока локально. Но при нажатии на кнопку, только темнеет окно, а модальное окно не появляется. Подскажите пожалуйста в чем моя проблема.
    Заранее спасибо.

    Ответить
    • driver: 5 июля, 2016 в 23:14

      Здравствуйте.
      Из вашего коммента вырезал код, предварительно его просмотрев.
      Смотрите в селекторе .overlay:target+.popup, с какого-то перепуга, у вас задано отрицательное значение top: -20%; соответственно окно и не показывается, достаточно прописать top: 20%; и всё будет даже очень хорошо)))

      Ответить
      • Kael: 6 июля, 2016 в 11:18

        Огромное спасибо за быструю помощь. Сделал как Вы сказали и все заработало.

        Ответить
  • Андрей: 5 июля, 2016 в 18:55

    Как сделать чтобы URL модального окна не было видно при открытие или закрытие?

    Ответить
  • Иван: 5 июля, 2016 в 23:48

    Здравствуйте!
    Подскажите что сделать чтобы не было в адресной строке не показывалось /#win1 и /#close при открытие или закрытие модального окна.
    Заранее спасибо.

    Ответить
    • Богдан: 22 июня, 2017 в 17:08

      Тоже интересует этот вопрос.

      Ответить
      • driver: 22 июня, 2017 в 17:49

        Если без js, посмотрите вариант на срытых чекбоксах: см.пример. Окно легко оформите по-своему, с анимацией то же самое, прикрутить можно любую.
        PS: Меня вот тоже интересует вопрос, что такого устрашающего в якоре, ни кого же не пугает использование якоря для быстрого перехода к нужному разделу страницы, например? ХЗ короче…

        Ответить
  • Max Matt: 6 июля, 2016 в 12:59

    Долго мучился чтобы сделать возможность размещения сразу нескольких всплывающих окон без скрипта и вот оно! Работает!
    Спасибо огромное за модуль.))

    Ответить
  • Sfera: 14 июля, 2016 в 11:55

    можно как ни будь организовать переход к след картике? не выхоя из простмотра текущей, заранее благодарен

    Ответить
    • driver: 14 июля, 2016 в 13:07

      Можно конечно. В первом окошке, просто укажите ссылку на следующее модальное окно. Например, первая картинка у вас выводится в окне с 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 оформите, как вашей душе угодно.

      Ответить
  • Константин: 14 июля, 2016 в 17:36

    Добрый день. У меня такой вопрос.
    У меня несколько модальных окон с затемнением, первое работает нормально (modal1, overlay), а вот остальные не хотят (modal2, overlay), (modal3 overlay)… пробовал добавлять overlay1,2,3 не помогает, в чём проблема, подскажите?

    Ответить
  • Дмитрий: 28 июля, 2016 в 12:32

    Добрый день,
    все прекрасно работает, но есть один вопрос по поводу прокрутки в модальном окне.
    Если со временем будут добавлятся новые картинки, тексты — как сделать так, чтобы высота div-блока автоматически подстраивалась?
    .popup div {
    overflow:auto;
    height: 100%;
    }

    Так, к сожалению, не работает. А постоянно задавать конкретное число пикселей не подходит… Очень надеюсь на Вашу помощь!

    Ответить
    • driver: 28 июля, 2016 в 22:21

      Здравствуйте, Дмитрий.
      Используйте max-height определите для себя оптимальное максимально-возможное значение с прицелом на будущее и всё. При достижении этого значение будет появляться прокрутка. Только вот смысл вашей затеи мне не совсем понятен…

      Ответить
      • Дмитрий: 12 августа, 2016 в 14:36

        Спасибо большое! Как раз то, что мне было нужно!

        Ответить
      • Влад: 16 августа, 2016 в 18:07

        НУ почему не понятен ? Он хочет чтобы при нажимании на пункты меню — страницы сайта выпадали в мини окне, для красоты ,а не в полном размере с перезагрузкой страницы.

        Ответить
  • Даниил: 24 августа, 2016 в 09:38

    Здравствуйте.
    Скажите пожалуйста, можно ли поправить, чтобы окошко открывалось через определённое время, после открытия страницы, либо на определённом этапе прокрутки?

    Ответить
    • driver: 24 августа, 2016 в 20:32

      Здравствуйте.
      Посмотрите такое решение: всплывающее окно при загрузке сайта

      Ответить
  • Андрей: 15 сентября, 2016 в 07:20

    Добрый день! Подскажите пожалуйста как подправить параметры модального окна, чтоб корректно открывался панорамный снимок, при условии, что все остальные в див блоке будут обычного формата. У меня этот снимок переворачивается и отображается боком. (на сайте — Ряд фотографий 4-й с верху, фотография 4-я слева)
    Заранее большое спасибо!

    Ответить
  • Андрей: 15 сентября, 2016 в 07:24

    прошу прощения, конкретизирую страницу

    Ответить
    • driver: 15 сентября, 2016 в 14:53

      У вас оригинальная картинка изначально сохранена повёрнутой (открыть картинку в новой вкладке). Сохранил картинку себе, открыл в редакторе, установил правильное положение и адаптировал под веб, залил на хостинг картинок. Что получилось смотрите в редакторе: тынц
      Другое дело, что для масштабных и панорамных изображений всё же лучше использовать другие решения, специально заточенные под эти цели.

      Ответить
      • Андрей: 2 октября, 2016 в 19:54

        Спасибо, вот я чайник :0) незаметил повёрнутое избржее. Порекомендуйте пожалуйста ссылочку для решений заточенных под панарамные кадры?

        Ответить
  • Alex: 28 сентября, 2016 в 18:18

    Привет разработчикам этого решения. Вопрос такой. Когда кликаю на элемент, который выводит модальное окно — отображается само модальное окно. Но если не кликать на пустую область и крестик закрытия — обновить вкладку браузера — то модальное окно никуда не пропадает, хото по логике ожидания его не должно быть. Подскажите как поправить

    Ответить
    • driver: 28 сентября, 2016 в 19:34

      Проще использовать вариант на скрытых чекбоксах : тынц

      Ответить
  • Евгений: 2 октября, 2016 в 14:31

    Здравствуйте!
    На десктопе все отлично работает, а вот на мобильном всплывает в самом верху страницы, тоесть, если у меня ссылка стоит в футере, то всплывающее окно я смогу увидеть проскролив в самый верх. Можно ли как-то это исправить?
    Спасибо!

    Ответить
    • driver: 2 октября, 2016 в 19:19

      Если ничего не меняли на Android и iOS должно бы корректно работать
      Посмотрите позиционирование .popup, должно быть именно фиксированным position: fixed; чтобы окно всплывало и оставалось там где вы ему назначили, в примере это 20% от верхнего края top:20%; при активном окне (см. селектор .overlay:target+.popup)
      Если хотите видеть окно строго по центру измените это значение на 50% и в трансформацию, так же внесите изменения, сделайте transform: translate(-50%, -50%);

      Ответить
      • Сергей: 2 августа, 2017 в 17:47

        Изменение стилей на предложенные значения не привели ни к чему. Мозилла и без них открывает модальные окна как положенно, а опера и хром соблюдают правила только со ссылками на модальные окна, расположенными в первом (начальном) окне, при скроллинге на ссылки, расположенные намного ниже (не попавшие в зону видимости начального состояния страницы) выводят модальные окна со сдвигом вверх — к началу страницы.

        Ответить
  • Роман: 19 октября, 2016 в 12:03

    Добрый день! Подскажите пожалуйста почему после закрытия окна, видео продолжает играть. Как это можно исправить?

    Ответить
  • Жду не дождусь: 3 ноября, 2016 в 08:49

    Жду не дождусь когда в адблок по дефолту все это всплывающее гавно поместят.
    задолбали, мягко говоря.

    Ответить
  • Станислав: 15 ноября, 2016 в 15:07

    Добрый день. Подскажите: нужно вывести большой обьем текста. Как сделать проурутку во всплывающмем окне ?? а то колесико мыши прокручивает основную страницу на заднем плане.

    Ответить
    • Станислав: 15 ноября, 2016 в 15:53

      Простите, не заметило что тут много страниц с комментариями — ответ нашел. Только остался один небольшой вопрос, который не могу решить — как сделать чтоб кнопка закрытия перемещалась вместе с полосой прокрутки. Пытался поставить свойство position: relative , но не помогло… все таки модальное окно и я не совсем понимаю как оно будет цепляться — за модальное окно или за основное.

      Ответить
  • Мурат: 20 ноября, 2016 в 21:40

    Классно, но в Эксплорире 8 не работает, белая полоса и все.

    Ответить
  • Андрей: 26 ноября, 2016 в 14:43

    Здравствуйте. Хочу сделать страницу с всплывающими окнами. Идея такая: текст статьи с кратким описанием некоторых предложений, а для заинтересовавшихся более полное описание будет выводится во всплывающем окне при нажатии на ссылку типа «Подробнее». Мне нужен простой и надежный функционал без лишних рамочек, теней и т.д. Попробовал вашу конструкцию, но что-то не идет. К сожалению я не силен в верстке, подскажите

    Ответить
  • Виктор: 30 ноября, 2016 в 00:27

    Дякую дуже поставив на сайт. Саме головне простота і немає сторонніх підключень JS

    Ответить
  • Александр: 1 декабря, 2016 в 01:51

    Добрый день!
    Не пойму как вставить в joomla. В style.css все прописал. В модуле пишу только html с отключенным визуальным редактором. Почему то весь фарш на странице. Комменты все 13 страниц прочел… 🙂

    Ответить
    • driver: 1 декабря, 2016 в 16:39

      Даже не могу предположить, почему у вас не работает привязка к стилям, именно popap никак не связан с прописанными в базовый файл стилями. Попробуйте ради эксперимента прописать стили напрямую в html шаблона в разделе head, или же создайте отдельный файл стилей модального окна и пропишите его.

      Ответить
      • Александр: 1 декабря, 2016 в 20:38

        В общем и целом разобрался. Создал свой файл css и дело пошло.
        Вот пока борюсь с изображением картинки (первая буква абзаца) и текста. Почему-то буква становится огромной.
        А так конечно классное решение и мне как начинающему просто супер!
        Премного благодарен!

        Ответить
  • Макс: 27 декабря, 2016 в 07:03

    Доброй ночи.
    Подскажите, как сделать чтобы модальное окно выезжало слева на право?

    Ответить
    • driver: 27 декабря, 2016 в 11:03

      Здравствуйте.
      Для этого необходимо изменить начальные позиции окна и трансформации, а так же положение окна при активации с помощью :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%);
      }

      Модальное окно будет выезжать слева на право. Сравните фрагменты кода из демо и представленный выше, и увидите что к чему

      Ответить
  • Евгени: 24 мая, 2017 в 08:19

    Класс, спасибо! Выручил. Очень полезная штука.

    Ответить
  • Денис: 9 июня, 2017 в 12:53

    А как сделать, чтоб это окно закрывалось только по кнопке закрыть, а не просто кликом
    в другую область сайта — не окна?

    Ответить
    • driver: 9 июня, 2017 в 13:20

      Фон затемнения(подложка мод.окна) выполнен в виде ссылки(тег <a>), просто замените, например на <div>
      На примере первого мод.окна следует:
      <a href="#x" class="overlay" id="win1"></a>
      заменить на:
      <div class="overlay" id="win1"></div>
      Всё, теперь окно будет закрываться только по кнопке закрытия. При использовании нескольких мод.окон на странице, не забывайте про правильный id и всё у вас получится.

      Ответить
  • Семен: 20 июня, 2017 в 11:37

    Спасибо за отличный пример. У меня единственная загвоздка возникла:
    Скопировал html-код к себе, но! если я убираю тег — окно не появляется! Просто затемнение экрана! Вставляю его — все ок, окно появляется! Сайт на wordpress. В чем может быть дело?

    Ответить
  • Саша: 23 июня, 2017 в 09:28

    При заключении модального окна в теги <form> оно перестает работать, как быть?
    Так же не понятно где настраивать прозрачность <opacity>

    Ответить
    • driver: 23 июня, 2017 в 11:54

      Здравствуйте, Саша.
      1. Просто не заключать м.окно в тег <form>. Если вам нужна форма, поместите её в м.окно, или сделайте саму форму модальной: см.примеры
      2. Прозрачность чего? Если фона затемнения, то прозрачность регулируется последним цифровым значением в свойстве background-color: rgba(0, 0, 0, 0.65);(цветовая модель RGBA), в данном примере это 0.65, попробуйте увеличить или уменьшить значение и увидите результат. Так же уровень прозрачности определяют с помощью свойства opacity

      Ответить
      • Саша: 24 июня, 2017 в 01:38

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

        Ответить
  • Ксения: 5 июля, 2017 в 13:02

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

    Ответить
  • Сергей: 11 июля, 2017 в 15:48

    Как можно выводить в модальном окне фрагмент из другого файла (*.txt, *.html) заключенный в теги ? Не хотелось бы перегружать index.html, в котором присутствуют только ссылки (много ссылок) для открытия модальных окон, содержимым модальных окон, в которых много текста.

    Ответить
    • driver: 11 июля, 2017 в 19:46

      Используйте iframe.

      Ответить
      • Сергей: 14 июля, 2017 в 14:28

        спасибо, но вымирающими тегами пользоваться нет смысла. вопрос решен с помощью jquery

        Ответить
  • snd: 9 августа, 2017 в 23:53

    Здравствуйте, 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?
    Помогите, пожалуйста.

    Ответить
  • Борис: 19 августа, 2017 в 10:35

    Спасибо за урок.
    В Вашем примере несколько всплывающих модальных окон с различными id. Как проверить открыто ли, к примеру, окно «win3»?
    Поясню вопрос — для стандартных всплывающих окон windows, как пишут, можно проверить лишь их закрытие:
    newWin = window.open (…)
    if (!newWin.closed) {
    alert («Всплывающее окно открыто.»)
    }
    else {
    alert («Всплывающее окно закрыто.»)
    }
    А как быть с данным всплывающим окном на CSS3 — есть ли метод, чтобы отловить открыто ли окно «win3»? Если есть, то как описать условие проверки и куда его помещать на странице?

    Ответить
    • driver: 19 августа, 2017 в 15:24

      Здравствуйте, Борис.
      Самое простое, это посмотреть в адресную строку браузера, там ясно отображается id открытого окна, например в моём демо, когда окно открыто будет так:
      css3_modalwin/demo.html#win1
      при закрытии окна так:
      css3_modalwin/demo.html#close
      Если же вам нужны уведомления в отдельном диалоговом окне, понадобится js

      Ответить
  • Борис: 9 сентября, 2017 в 13:04

    Андрей, спасибо за подсказки с якорями. Всё получилось.
    Сотрите мой второй вопрос к вам с нелепой блок схемой. Он уже не нужен.

    Ответить
  • keeponrail: 1 октября, 2017 в 21:46

    Здравствуйте! А можно в popup окно вложить html Документ? например тест.

    Ответить
    • driver: 1 октября, 2017 в 22:31

      Конечно можно, что прекрасно показано в примерах.

      Ответить
  • Виктор: 11 октября, 2017 в 11:53

    Здравствуйте! М.Окно работает прекрасно, но если разместить слишком много текста, а в моем случае это «политика конфиденциальности» то отсутствует скролл, т.е. невозможно спуститься и дочитать текст. Подскажите, пожалуйста, как поправить?
    Заранее благодарен!

    Ответить
    • driver: 11 октября, 2017 в 18:08

      Здравствуйте, Виктор.
      На вопрос по поводу прокрутки отвечал ранее в комментах, посмотрите здесь.

      Ответить
  • Роман: 12 октября, 2017 в 13:39

    Спасибо. Очень простое решение — то что нужно)

    Ответить
  • Виктор: 3 ноября, 2017 в 10:55

    Здравствуйте! Подскажите пожалуйста, вот для эксперимента установил 4 кнопки, как на демо, и вставляю в третье окно iframe код с youtube. Оно проигрывается, но почему то не закрывается…

    Ответить
    • driver: 3 ноября, 2017 в 11:40

      Здравствуйте, Виктор.
      Оптимального всех и вся устраивающего решения остановки видео при закрытии окна средствами 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
      Чтобы закрыть вопросы и в этой статье, в заключении пожалуй стоит дать пояснения по-поводу остановки видео, чем сей час же и займусь.

      Ответить
  • Николай Z: 11 ноября, 2017 в 11:10

    Здравствуйте, нужна помощь! Использую платформу опенкарт искал вариант popup окна без js. Сделал как написано в данной статье. Работает это решение только на определенных страницах (на главной странице в модуле табы). В страницах категории не работает, при нажатии просто переходит на главную страницу и всё. Пожалуйста буду ждать ответа.!

    Ответить
  • Виктор: 26 ноября, 2017 в 12:36

    Здравствуйте! Подскажите пожалуйста, как сделать, чтобы модальное окно на смартфоне прокручивалось вместе с сайтом. У меня там список, и поэтому окно не влазит, надо прокручивать.
    Спасибо

    Ответить
  • Виктор: 26 ноября, 2017 в 13:01

    Всё, спасибо не надо, уже нашёл

    Ответить
  • Алексей: 2 декабря, 2017 в 17:14

    Привет! Ни как ни могу привязать модалку а именно, готовое менюшка, нужно что бы при нажатии на один из пунктов меню всплывала модалка, подскажите каким образом это осуществить… стили прописаны:


    ……

    Ответить
    • driver: 2 декабря, 2017 в 17:34

      Алексей, здравствуйте.
      При вставке кода в комментарий используйте кнопку «Код» на панели комментирования.

      Ответить
  • Алексей: 2 декабря, 2017 в 17:47

    <a href="#win1" rel="nofollow">
    <i></i>
    <strong>бла...</strong>
    бла...
    </a>

    Вот кусок из меню, как прикрутить модалку <a href="#win1" rel="nofollow">, что бы при клике на пункт меню она появлялась?

    Ответить
    • driver: 2 декабря, 2017 в 19:36

      Пункты меню, по сути это те же кнопки, как в демо. Атрибут 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 необходимо прописать все необходимые правила, в статье и в исходниках они представлены.
      Не вижу ни какой сложности, весь фарш разжеван давно и основательно)).

      Ответить
  • Сергей: 20 декабря, 2017 в 15:06

    Доброго времени суток.
    Срабатывает только то что идет первым в html теле.
    Например:

    Гиперреализм

    Срабатывает только
    Если их поменять местам, перенести код Модального окна 4 выше чем 3, то сработает
    а все остальные НЕТ.
    Срабатывает на отлично только самое верхнее !
    Пока не понял почему…
    Если кто-то знает ответ…подскажите…очень нужно…
    SOS…
    Many thanks !

    Ответить
  • Руслан: 15 апреля, 2018 в 13:01

    Здравствуйте.Модальное окно отличное и работает идеально во всех современных браузерах.Интересует вопрос, можно ли скрыть эти модальные окна чтобы они совсем не показывались когда браузер не поддерживает их, потому что они тогда висят все в одном месте вверху сайта

    Ответить
  • Alex: 18 июля, 2018 в 20:14

    Добрый день!
    Спасибо! Отличный способ.
    Но возникла проблема для мобильной версии. Постоянно отображается модальное окно на мобильном устройстве. Возможно где-то чего-то не хватает?
    Буду очень благодарен за помощь

    Ответить
  • Сергей: 23 сентября, 2018 в 00:21

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

    Ответить
  • Дмитрий: 26 сентября, 2018 в 18:29

    Здравствуйте!
    Благодарю Вас за замечательный скрипт! Все сделал по Вашей инструкции, но прошу немного помочь. Модальное окно (кнопка «Изложить ситуацию») «уходит» вниз за край монитора. В результате не видно части содержимого. Большая просьба, подскажите, пожалуйста, что и где подправить. Заранее благодарен!

    Ответить
  • bababudu007: 27 сентября, 2018 в 10:44

    Положение модального окна по вертикали(ваш случай) регулируется в файле стилей класс .overlay:target+.popup меняйте свойство top: 20%;
    по горизонтали класс .popup свойство left: 50%;

    Ответить
  • Сергей: 5 октября, 2018 в 19:10

    Добрый вечер. Модальное окно все ок работает,но не полностью. Почему после того как нажму на закрытие окна(крестик),то окно не закрывается?

    Ответить
  • Сергей: 5 октября, 2018 в 19:27

    При нажатии на крестик крестик крутится.но ничего не происходит и ничего не закрывается.А если на любую область нажать то окно закрывается.Как исправить?

    Ответить
    • driver: 5 октября, 2018 в 21:05

      Могу только предполагать, так как не вижу то что вы делаете(пациента), что используя кнопку закрытия ввиде ссылки(собственно как в примере), вы по какой то причине упустили или изменили адрес ссылки, см. атрибут href="#close", кстати в адресе #close совсем не обязательное значение, но оставлять адрес пустым, считается вроде как не совсем кошерным, да и страница при этом тупо перезагружается, можете прописать просто href="#", но тогда при закрытии окна страница прокрутится вверх, что тоже не есть хорошо.
      Как вариант href="#!" или же, как в случае с ссылкой фона затемнения overlay, прописываете href="#x", что выглядит вполне логичным.
      Других причин бага с закрытием окна по кнопке не вижу.

      Ответить
      • Сергей: 6 октября, 2018 в 01:14

        Спасибо за ответ, но я решил эту проблему кардинально… Решил что и без окон сайт ничего. А потом и вовсе бросил так как понял что данный товар неактуален. А проблема была скорее всего в конфликте с чем-то в коде.

        Ответить
  • Алексей: 16 июля, 2019 в 13:15

    Добрый день.
    Использую пятый вариант. Подскажите пожалуйста, где я делаю ошибку. У меня есть несколько картинок, я хочу открыть например вторую, но в модальном окне открывается всегда первая картинка. И подскажите пожалуйста, как изменить размер, а то они очень уж большие, искал — не разобрался…
    Спасибо

    Ответить
  • ela: 12 ноября, 2019 в 08:08

    Не могу вставить контент в «здесь будет текст, видео, всё, что угодно». Ссылка во фрейме не даёт результата. Открывается белый пустой лист.

    Ответить
    • driver: 12 ноября, 2019 в 15:07

      Вариант №3, видео youtube встроено как раз таки в iframe, всё прекрасно загружается и показывается.
      Для наглядности, в песочнице, специально для вас, забабахал пример: Тынц

      Ответить
  • Марина Русамура: 27 ноября, 2019 в 13:35

    Вариант третий самый нормальный. Другой момент, как на это отреагирют поисковики.

    Ответить
    • driver: 27 ноября, 2019 в 21:00

      В большинстве случаев использование именно модальных окон (окна взаимодействия) или оверлеев, которые открываются в том же окне браузера, не является проблемой до тех пор, пока они не связаны со спамом, рекламой или чем-то ещё, что явно мешает пользователю.
      Другое дело поп-апы, которые открываются в новых окнах, Google их люто ненавидит и считает нарушением правил поисковой системы. Многие браузеры попросту блокируют такие окна автоматически.
      По SEO и модальным окнам, если интересно, можете почитать неплохой материал на Дигистр

      Ответить

Оставить комментарий

Ваш email не будет опубликован.

Вы можете использовать следующие HTML тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>