373 комментария

  1. Константин
    14 июля 2016

    Добрый день. У меня такой вопрос.

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

    Ответить

  2. Дмитрий
    28 июля 2016

    Добрый день,

    все прекрасно работает, но есть один вопрос по поводу прокрутки в модальном окне.

    Если со временем будут добавлятся новые картинки, тексты — как сделать так, чтобы высота div-блока автоматически подстраивалась?

    .popup div { overflow:auto; height: 100%; }

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

    Ответить

    • driver
      28 июля 2016

      Здравствуйте, Дмитрий.

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

      Ответить

      • Дмитрий
        12 августа 2016

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

        Ответить

      • Влад
        16 августа 2016

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

        Ответить

  3. Даниил
    24 августа 2016

    Здравствуйте.

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

    Ответить

  4. Андрей
    15 сентября 2016

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

    Заранее большое спасибо!

    Ответить

  5. Андрей
    15 сентября 2016

    xn--90afepkppl0g.xn--p1acf/Medveje.html прошу прощения, конкретизирую страницу

    Ответить

    • driver
      15 сентября 2016

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

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

      Ответить

      • Андрей
        2 октября 2016

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

        Ответить

  6. Alex
    28 сентября 2016

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

    Ответить

    • driver
      28 сентября 2016

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

      Ответить

  7. Евгений
    2 октября 2016

    Здравствуйте!

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

    Спасибо!

    Ответить

    • driver
      2 октября 2016

      Если ничего не меняли на Android и iOS должно бы корректно работать

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

      Если хотите видеть окно строго по центру измените это значение на 50% и в трансформацию, так же внесите изменения, сделайте transform: translate(-50%, -50%);

      Ответить

  8. Роман
    19 октября 2016

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

    Ответить

  9. Макс
    27 декабря 2016

    Доброй ночи.

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

    Ответить

    • driver
      27 декабря 2016

      Здравствуйте.

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

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

      Ответить

  10. Виктор
    3 января 2017

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

    Ответить

    • driver
      3 января 2017

      Здравствуйте, Виктор.

      Оптимального всех и вся устраивающего решения остановки видео при закрытии окна средствами 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

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

      Ответить

  11. Николай Z
    11 января 2017

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

    Ответить

  12. Загрузить еще комментарии…

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Наверх
мобильн. компьютерная