Модальное окно на CSS3 (вариант №2)
Здравствуйте всем!
Сегодня будет не полноценный урок, а всего лишь небольшая демонстрация, ещё одного варианта всплывающего модального окна, реализованного исключительно средствами CSS3, без javascript и дополнительных изображений в формировании стилей.
За основу взят первый вариант: «Модальные всплывающие окна с помощью CSS3 без Javascript», проверенный и ставший довольно популярным среди пользователей, читающих мой блог.
Во втором варианте, особо нового вы ничего не увидите, как мог, постарался упростить всю конструкцию (html, css), добавил совсем чуточку элементов анимации при появлении окна, немного видоизменил кнопку закрытия и ещё пару-тройку несущественных мелочей.
Чтобы вам легче было разобраться что к чему и зачем, оставил все исходники и живой пример работы окошка в онлайн-редакторе, так что смело можете поэкспериментировать с параметрами «не отходя от кассы» ))).
Для тех же, кто предпочитает смотреть живой пример работы модального окошка на отдельной странице, специально такую страницу заделал. Исходники бережно упаковал в архив и выложил для скачивания через Яндекс.Диск:
Кстати, если кого заинтересовала кнопочка, для вызова модального окна, что представлена в примере, совсем недавно, я подробно расписывал, как сделать такую «Ну очень большую кнопку 3D».
С поддержкой браузерами данного решения, всё как всегда, современные версии отлично обрабатывают вывод модального окна, а IE-шка версии ниже 9-й версии, пролетает мимо, как и сидельцы упорно использующие это детище мягкотелых. Так что работаем всё больше на будущее ))).
Заметите ошибку, или возникнут вопросы, пишите в комментариях [↓], всё обязательно обсудим.
Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:
Здравствуйте. Подскажите, пожалуйста, что необходимо сделать, чтоб разместить на одной странице несколько модальных окон? То есть мне нужно разместить 2 ссылки, при нажатии на которые открывались бы окна с разным содержанием.
В каждой ссылке прописываете адрес соответствующий идентификаторам модальных окон. В примере одно окно с
id="openmodal", в ссылке на вызов соответственноhref="#openmodal". К каждому новому окну просто добавляйте порядковый номер, если ссылкаhref="#openmodal-1", она откроет окно сid="openmodal-1",и т.д…Елки-палки! Как всё просто оказывается!
Спасибо Вам огромное за помощь, за быстрый ответ и СПАСИБИЩЕ, что создали блог и делитесь опытом!!!!
Добрый день, подскажите почему открывается в новой вкладке?
Посмотрите ссылку открытия модального окна, не используете ли вы атрибут
target="_blank", если он у вас прописан удалите.Спасибо большое за совет!
Работают окна с загрузкой посредством .
Добрый день! Большое спасибо за очень ценный и интересный материал. Использовал это окно на своем сайте, но столкнулся с неожиданной проблемой. В случае если ссылка на открытие модального окна находится внизу страницы с большим количеством контента, при его открытии верхняя граница вертикальной полосы прокрутки страницы выравнивается с текущим её положением, тем самым отрезая часть контента, но при этом отрезанные пиксели появляются ниже футера в виде пустой области… Причем проблема проявляется не на всех страницах а только на некоторых без всякой видимой системы.
День добрый, Александр. Даже не могу предположить, учитывая, что косяк всплывает не системно, загвоздка может крыться в чём угодно. У меня, да и в интернетах, полно других вариантов исполнения модальных окон. В этом примере использую модальный блок внутри контейнера выполняющего функцию затемнения фона, прячу окошко минусуя от верхней границы
top: -1000px, позиционирую относительно. Попробуйте исключить в классе .dialogposition: relative;вообще, отдав тем самым позиционирование окна родителю. Правда в этом случае улетит кнопка закрытия, но это уже лечится довольно легко.Проверял на страницах с объёмным содержанием, с размером блока контента +10000px, браузеры обрабатывают в общем корректно, только в Safari прослеживаются некоторые притормаживания при появлении окна. Так что, ищите да обрящите)))
И снова приветствую! Большое спасибо за оперативный ответ! Ваш совет помог, проблема исчезла, но как Вы и сказали улетела кнопка закрытия, которая помимо помимо чисто эстетической функции (а с этим хочу заметить все обстоит супер), несет еще и чисто практическую функцию. И поскольку Вы сказали, что это лечится легко, смиренно снова прошу совета=)
Выяснились новые подробности=) Во первых глюк опять вернулся, но нет худа без добра, появился эффект который не работал раньше, а именно при закрытии форма стала постепенно растворяться, раньше это не работало. Во вторых оказалось что проблема проявляется только в хроме, в фоксе и опере работает без нареканий!
Спасибо за интересный материал! Подскажите, а возможна реализация открытия модального окна с загрузкой в него данных с внешнего URL на CSS (или это возможно реализовать только на JS/JQuery)?
Здравствуйте.
Используйте
<iframe>с внешним url внутри блока мод. окна. Подгоните размеры окна так чтобы фрейм корректно вписывался в модальный блок, при необходимости пропишите прокрутку