Необычное модальное окно с JS + CSS
 | |
| Необычное по своей динамике модальное окно, которое изначально ставят в описание для открытия или под кнопку, где создано на CSS и JS. Здесь в материале собираемся сделать, это модальное окно, которое уже готово по своим функциям, где по умолчанию открывается в центре экрана при нажатии на ссылку, в то время как все, что лежит в основе окна, становится размытым. Это может быть сделано с помощью JavaScript, но в настоящее время нам не нужен, так как задействуем CSS, скрипт пригодится для решения этой задачи. В основном привязке происходит на модальное окно при помощи хешу URL. Таким образом, вы можете обратиться к модальному окну в URL, что довольно удобно, но здесь лучше оставить все по умолчанию. Только в том случай если вы решите ключевое слово для открытия выставлять в описание, где на демонстраций показано. Но безусловно такой стиль можно вывести и через простую кнопку или выставить клик в отдельный блок. Но при оформлении некоторые ставят выключатели, но здесь веб-разработчик сам решает. Если у вас официальный сайт, где занимаетесь услугой, то здесь все нужно выводить как можно ярче, но как через кнопку только можно выстроить. Окно полностью проверено, где при открытие страницы так все выглядит:  Якорь открытие установлен в первых словах, где с кликом открываем окно:  Установка: HTML Код <span id="kubecenas" class="target"></span> <span id="keatuves" class="target"></span> <div class="sakuvedun"> <div class="lectinglecting vertical-align-middle"> <h2>ZorNet.Ru — сайт для вебмастера</h2> <article>Я не могу вспомнить обстоятельства, которые привели Улицы Ярости 2 в жизни моего лучшего друга и меня самого, но мы прожили много часов, избивая это снова и снова. Мы оба испытали третью запись, независимую друг от друга, и выросли в функционирующих взрослых за последние 24 года. Таким образом, представьте мое волнение, когда Dotemu, команда, которая стоит за возрождением Rage 4.</article> <a class="modoligu-laveget" href="#kubecenas">X</a> </div> </div> <div class="previouse-dentries"> <h1>ZorNet.Ru — сайт для вебмастера</h1> <p><a href="#keatuves">Нажать для вызова окна</a> После того, что похоже на целую вечность задержек, Crackdown 3 уже на грани полного релиза, и фанаты начинают накачиваться. У Microsoft есть несколько эксклюзивных игр, но, в частности, серия Crackdown, похоже, разработала почти б-фильм, похожий на культовый.</p> </div> CSS Код .previouse-dentries { background: radial-gradient(rgba(222, 218, 218, 0) 0, rgba(245, 237, 237, 0.15) 30%, rgba(232, 223, 223, 0.3) 32%, rgba(234, 226, 226, 0) 33%) 0 0, radial-gradient(rgba(234, 230, 230, 0) 0, rgba(239, 234, 234, 0.1) 11%, rgba(241, 237, 237, 0.3) 13%, rgba(232, 226, 226, 0) 14%) 0 0, radial-gradient(rgba(255,255,255,0) 0, rgba(241, 235, 235, 0.2) 17%, rgba(255,255,255,.43) 19%, rgba(241, 235, 235, 0) 20%) 0 110px, radial-gradient(rgba(239, 231, 231, 0) 0, rgba(245, 238, 238, 0.2) 11%, rgba(236, 232, 232, 0.4) 13%, rgba(239, 233, 233, 0) 14%) -130px -170px, radial-gradient(rgba(241, 237, 237, 0) 0, rgba(239, 233, 233, 0.2) 11%, rgba(239, 231, 231, 0.4) 13%, rgba(255,255,255,0) 14%) 130px 370px, radial-gradient(rgba(230, 225, 225, 0) 0, rgba(241, 234, 234, 0.1) 11%, rgba(236, 231, 231, 0.2) 13%, rgba(228, 223, 223, 0) 14%) 0 0, linear-gradient(45deg, #565a05 0%, #245808 20%, #0f884b 30%, #087f9e 40%, #090f6d 50%, #7919a0 60%, #9c1585 70%, #961637 80%, #98350f 90%, #d06d15 100%); background-size: 470px 470px, 970px 970px, 410px 410px, 610px 610px, 530px 530px, 730px 730px, 100% 100%; background-color: #981335; height: 100%; } .previouse-dentries a, .previouse-dentries a:link, .previouse-dentries a:visited, .previouse-dentries a:focus { padding: 3px 6px; background: #b13e12; color: white; display: inline-block; text-decoration: none; } .previouse-dentries > * { width: 940px; padding: 20px; margin: 0 auto; color: white; } .sakuvedun::before { lectinglecting: ''; display: inline-block; height: 100%; vertical-align: middle; margin: 0; } .target { display: block; left: 0; position: fixed; top: 0; width: 0; height: 0; visibility: hidden; pointer-events: none; } .sakuvedun { position: fixed; top: 0; right: 0; left: 0; bottom: 0; z-index: 100; text-align: center; display: none; /* Fallback for legacy browsers */ background-color: rgba(0,0,0,0.6); } .sakuvedun > .lectinglecting { text-align: left; display: inline-block; background-color: #5b117b; box-sizing: border-box; color: white; position: relative; width: 620px; padding: 17px; margin: 90px 1px 1px 1px; border-radius: 5px; border: 2px solid #c88fe0; } .sakuvedun > .lectinglecting .modoligu-laveget { position: absolute; top: 18px; right: 18px; width: 15px; height: 15px; color: white; font-size: 18px; text-decoration: none; } .target:target + .sakuvedun { display: block; } .sakuvedun.is-expanded { display: block; } .sakuvedun.is-expanded > .lectinglecting { top: 50%; margin-top: -45px; } :root .target:target ~ .previouse-dentries { filter: blur(5px); -webkit-filter: blur(5px); filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' ><filter id='blur5'><feGaussianBlur in='SourceGraphic' stdDeviation='5' /></filter></svg>#blur5"); // for Firefox filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='5'); } :root span[id="kubecenas"]:target ~ .previouse-dentries { filter: none; -webkit-filter: none; } :root .sakuvedun { display: block; background-color: transparent; transition: transform 0.3s cubic-bezier(0.5, -0.5, 0.5, 1.5); transform-origin: center center; transform: scale(0, 0); } :root .sakuvedun > .lectinglecting { box-shadow: 0 5px 20px rgba(0,0,0,0.5); } :root .target:target + .sakuvedun { transform: scale(1, 1); } JS Код (function( window ){ var doc = window.document, sakuvedun = { handleLayoutKeyUp: function( e ){ var id = window.location.hash.substr( 1 ); if( e.keyCode === 27 ) { if ( !!doc.querySelector( "#" + id + ".target" ) ) { window.location.hash = "#kubecenas"; } } }, handleOutWinClick: function( e ){ if ( e.target.classList.contains( "sakuvedun" ) ) { window.location.hash = "#kubecenas"; } } }; doc.addEventListener && doc.addEventListener( "DOMlectinglectingLoaded", function(){ // Subscribe event handlers Array.prototype.slice.call( doc.querySelectorAll( ".sakuvedun" ), 0 ).forEach(function( el ){ el.addEventListener( "click", sakuvedun.handleOutWinClick, false ); }); window.addEventListener( "keyup", sakuvedun.handleLayoutKeyUp, false ); }); Возможно, вам не хватает некоторых дополнительных функций, таких как закрытие или клик за пределами модального содержимого. Мы можем внести это с помощью небольшого количества JavaScript. Целевой псевдо-селектор имеет хорошую поддержку среди современных браузеров, но, как вы можете догадаться, он не поддерживается в браузерах IE с версиями меньше 9 версии. Где тем не менее можем ограничить это поведение с помощью стиля. Тем не менее, при правильном смягчении из руководств по дизайну материалов, вы получаете резкие и быстрые анимации. А по сути смотрится супер, где если вы изначально задействуете его в оригинальном виде при открытие. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 5 | |
| |
