Главная » HTML & CSS » Модальное окно на CSS3 (вариант №2)

Модальное окно на CSS3 (вариант №2)

Здравствуйте всем!
Сегодня будет не полноценный урок, а всего лишь небольшая демонстрация, ещё одного варианта всплывающего модального окна, реализованного исключительно средствами , без javascript и дополнительных изображений в формировании стилей.
За основу взят первый вариант: «Модальные всплывающие окна с помощью CSS3 без Javascript», проверенный и ставший довольно популярным среди пользователей, читающих мой блог.
 
Модальное окно на CSS3
 
Во втором варианте, особо нового вы ничего не увидите, как мог, постарался упростить всю конструкцию (html, css), добавил совсем чуточку элементов анимации при появлении окна, немного видоизменил кнопку закрытия и ещё пару-тройку несущественных мелочей.

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

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

Кстати, если кого заинтересовала кнопочка, для вызова модального окна, что представлена в примере, совсем недавно, я подробно расписывал, как сделать такую «Ну очень большую кнопку 3D».
С поддержкой браузерами данного решения, всё как всегда, современные версии отлично обрабатывают вывод модального окна, а IE-шка версии ниже 9-й версии, пролетает мимо, как и сидельцы упорно использующие это детище мягкотелых. Так что работаем всё больше на будущее ))).
Заметите ошибку, или возникнут вопросы, пишите в комментариях [↓], всё обязательно обсудим.

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

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

13 комментариев
  1. Алексей:

    Здравствуйте. Подскажите, пожалуйста, что необходимо сделать, чтоб разместить на одной странице несколько модальных окон? То есть мне нужно разместить 2 ссылки, при нажатии на которые открывались бы окна с разным содержанием.

    Ответить
    • driver:

      В каждой ссылке прописываете адрес соответствующий идентификаторам модальных окон. В примере одно окно с id="openmodal", в ссылке на вызов соответственно href="#openmodal". К каждому новому окну просто добавляйте порядковый номер, если ссылка href="#openmodal-1", она откроет окно с id="openmodal-1",и т.д...

      Ответить
      • Алексей:

        Елки-палки! Как всё просто оказывается!

        Спасибо Вам огромное за помощь, за быстрый ответ и СПАСИБИЩЕ, что создали блог и делитесь опытом!!!!

        Ответить
  2. Дима:

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

    Ответить
    • driver:

      Посмотрите ссылку открытия модального окна, не используете ли вы атрибут target="_blank", если он у вас прописан удалите.

      Ответить
  3. Спасибо за интересный материал! Подскажите, а возможна реализация открытия модального окна с загрузкой в него данных с внешнего URL на CSS (или это возможно реализовать только на JS/JQuery)?

    Ответить
    • driver:

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

      Используйте <iframe> с внешним url внутри блока мод. окна. Подгоните размеры окна так чтобы фрейм корректно вписывался в модальный блок, при необходимости пропишите прокрутку

      Ответить
  4. Спасибо большое за совет!

    Работают окна с загрузкой посредством .

    Ответить
  5. Добрый день! Большое спасибо за очень ценный и интересный материал. Использовал это окно на своем сайте, но столкнулся с неожиданной проблемой. В случае если ссылка на открытие модального окна находится внизу страницы с большим количеством контента, при его открытии верхняя граница вертикальной полосы прокрутки страницы выравнивается с текущим её положением, тем самым отрезая часть контента, но при этом отрезанные пиксели появляются ниже футера в виде пустой области... Причем проблема проявляется не на всех страницах а только на некоторых без всякой видимой системы.

    Ответить
    • driver:

      День добрый, Александр. Даже не могу предположить, учитывая, что косяк всплывает не системно, загвоздка может крыться в чём угодно. У меня, да и в интернетах, полно других вариантов исполнения модальных окон. В этом примере использую модальный блок внутри контейнера выполняющего функцию затемнения фона, прячу окошко минусуя от верхней границы top: -1000px, позиционирую относительно. Попробуйте исключить в классе .dialog position: relative; вообще, отдав тем самым позиционирование окна родителю. Правда в этом случае улетит кнопка закрытия, но это уже лечится довольно легко.

      Проверял на страницах с объёмным содержанием, с размером блока контента +10000px, браузеры обрабатывают в общем корректно, только в Safari прослеживаются некоторые притормаживания при появлении окна. Так что, ищите да обрящите)))

      Ответить
      • И снова приветствую! Большое спасибо за оперативный ответ! Ваш совет помог, проблема исчезла, но как Вы и сказали улетела кнопка закрытия, которая помимо помимо чисто эстетической функции (а с этим хочу заметить все обстоит супер), несет еще и чисто практическую функцию. И поскольку Вы сказали, что это лечится легко, смиренно снова прошу совета=)

        Ответить
        • driver:

          Самое простое, это в классе .close исключите свойства position: absolute; top: -10px; и right: -12px;.

          Затем, если вы хотите видеть кнопу в правом верхнем углу модального окна, слегка выезжающую за границы, с помощью float: right; отправляете кнопу вправо, а отрицательные значения margin-right: -30px; и margin-top: -14px;, поставят кнопку там где надо.

          Значения маржи подберёте на месте, как вам видится.

  6. Выяснились новые подробности=) Во первых глюк опять вернулся, но нет худа без добра, появился эффект который не работал раньше, а именно при закрытии форма стала постепенно растворяться, раньше это не работало. Во вторых оказалось что проблема проявляется только в хроме, в фоксе и опере работает без нареканий!

    Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru