Модальное окно на SVG эффекте для сайта
 | |
| Красивое появление модального окна всегда привлекает, если еще несет нужную информацию, что по эффекту здесь сделано просто чудесно. Оно по клику появится с левой стороны и если вам нужно закрыть, то жмем крестик и оно резко съезжает в правую сторону. Но не возможно посещаемый сайт или который реально сделан для пользователя, представить, что на этом ресурсе нот такого окна или похожего. Так как информацию можно в нем любую прописать и поставить кнопку с названием, что когда нужно вызвать его. Это могут быть как подсказки, которые написаны администрацией или стоять оператор, что будет выводить статистику, что сказать, это продолжение сайта, как в контейнере блок, только все по установке немного по другому, которая не слишком отличается от простого скрипта, который идет со стилями, что здесь в таком же плане. Здесь безусловно красивый и неповторимый эффект появление его на портале, где стразу по сторонам идет затемнение, чтоб не сего не отвлекало. Его можно сделать под свой дизайн и выставить стиль на оттенок цвета. Если оно по умолчанию идет в светлой гамме, то выставляем в CSS, что с ним идет темный цвет и уже в черном оттенке. Саму кнопку вызова можно ставить как в любой блог или в низ сайта и также вверх. Проверяя его на тестовом сайте и установив, все опишу подробно. Так как основном на такие окна установка идет не слишком сложная, просто читаем и ставим как написано, а точнее все разместил в низ сайта, чтоб можно было вызвать на любой странице. Здесь в темный цвет выставил и знаки в серый. Приступаем к установке: Ставил в низ сайта между head script и css /head и выставляем скрипт со стилями. Код <script src="http://zornet.ru/zorner_ru_1/menu.min.js"></script> <style> .content { text-align: center; } .modal-overlay { background: rgba(60, 63, 78, 0.9); position: fixed; top: 0; left: 0; bottom: 0; right: 0; opacity: 0; visibility: hidden; } .modal-wrapper { position: fixed; top: 0; left: 0; bottom: 0; right: 0; overflow: hidden; pointer-events: none; } .modal { background: #fff; color: #666871; text-align: center; width: 400px; max-width: 90%; height: 250px; top: 0; left: 0; bottom: 0; right: 0; position: absolute; margin: auto; padding: 40px; pointer-events: auto; font-weight: bold; visibility: hidden; } @media screen and (max-width: 40em) { .modal { height: 350px; } } .modal h2 { font-size: 2.25em; margin: 0.5em 0 0.25em; color: #BDBFCA; font-family: 'Lustria', 'Goudy Old Style', Garamond, 'Big Caslon', 'Times New Roman', serif; } /* Buttons */ .open-modal { border: none; margin: 3em 0 7em 0; background: #7D87AE; color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 20px; padding: 1em 2em; font-weight: bold; border-radius: 40px; -webkit-transition: background 0.3s; transition: background 0.3s; } .open-modal:hover { background: #6d78a5; } .close-modal { color: #aaa; background: none; position: absolute; top: 10px; right: 10px; border: none; width: 20px; height: 20px; line-height: 15px; font-size: 22px; font-weight: bold; } .close-modal:hover { color: #666871; } </style> Остаемся на месте и перед /body устанавливаем, если body нет, то ниже прописываем каркас с описанием. Код <div class="modal-overlay"></div> <div class="modal-wrapper"> <div class="modal js-blur"> <button class="close-modal">×</button> <h2>Это заголовок, что в выше идет</h2> <p>Здесь будет описание, что автоматически будет выводить по центру, но если не делать в колонки или по другому формату</p> <p>Администрация сайта ZORNET.Ru</p> </div> </div> </div> И там же остаемся и не куда не уходим и нам нужно найти /body и если опять нет, то также продолжаем прописывать ниже. Код <script src="http://zornet.ru/zorner_ru_1/motionblur.js"></script> <script src="http://zornet.ru/zorner_ru_1/modal.js"></script> И осталось поставить кнопку вызова, устанавливаем там где нужно. Код <button class="open-modal">По клику появиться окно</button> Все сохраняем и обновляем страницу и вызываем окно, и потом его можно редактировать по дизайн, чтили все идут открытые, что будет не сложно вывести оттенок или закруглить углы. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |