Neste tutorial, imos aprender a crear maneiras emerxentes con JavaScript (Windows de diálogo) sen usar un marco de traballo como Bootstrap ou A Biblioteca de terceiros. Crearemos todo desde cero, ofrecendo un control completo sobre como funciona e como se ve.
Aquí está o espectáculo que imos crear:
1. Comezar coa marca da páxina
primeiro creará un modal. Para facelo, engadiremos a clase .modal e unha identificación única a un recipiente. A continuación, imos especificar o diálogo axustando un elemento .modal-dialog como elemento secundario directo do .modal. O diálogo conterá o contido do MODAL. Pode ser calquera tipo de contido como texto, imaxes, caixas de luz, notificacións / alertas de usuario, etc.
“unha xanela de diálogo (ou modal) é un pequeno elemento Interface de usuario (UI) que aparece en primeiro plano nun sitio web, normalmente é activado como un aviso para que o usuario faga algo “- adi purdila
a Abre un modal, necesitaremos calquera elemento co atributo data-open (normalmente button). O valor deste atributo debe ser a identificación do modal desexado.
Por defecto, un modal pechará se facemos clic nos seus límites ou cando presionamos a tecla data-close (normalmente button).
Ao comezo, o modal aparecerá / desaparecerá cun efecto de desvanecemento. Pero temos a capacidade de axustar o efecto de animación de diálogo usando o atributo data-animation. o valor deste atributo que ten que ser engadido a .modal it pode ser calquera dos seguintes valores:
-
slideInOutTop -
slideInOutLeft -
slideInOutRight -
zoomInOut -
rotateInOutDown -
mixInAnimations
Veremos máis de cerca estes valores nunha próxima sección.
Por agora, imos familiarizarnos coa marca que é necesaria para representar un só modal:
<button type="button" class="open-modal" data-open="modal1">...</button><div class="modal"> <div class="modal-dialog"> <header class="modal-header"> ... <button class="close-modal" aria-label="close modal" data-close>✕</button> </header> <section class="modal-content">...</section> <footer class="modal-footer">...</footer> </div></div>
2. Define algúns estilos básicos
co marcado preparado, configuraremos algúns Variables CSS e reiniciaremos os estilos:
:root { --lightgray: #efefef; --blue: steelblue; --white: #fff; --black: rgba(0, 0, 0, 0.8); --bounceEasing: cubic-bezier(0.51, 0.92, 0.24, 1.15);}* { padding: 0; margin: 0;}button { cursor: pointer; background: transparent; border: none; outline: none; font-size: inherit;}
Despois, imos enfocarse horizontalmente e contido vertical d E a páxina. Ademais, imos darlle algúns estilos ao botón responsable da apertura do modal:
/*CUSTOM VARIABLES HERE*/body { display: flex; align-items: center; justify-content: center; height: 100vh; font: 16px/1.5 sans-serif;}.btn-group { text-align: center;}.open-modal { font-weight: bold; background: var(--blue); color: var(--white); padding: .75rem 1.75rem; margin-bottom: 1rem; border-radius: 5px;}
Neste punto, centraremos a nosa atención nos estilos de O modal.
Cada modal terá as seguintes características:
- será unha pantalla completa cunha posición fixa. É dicir, será visto como unha superposición que abarca todo o ancho e alto da xanela.
- terá unha cor de fondo escuro.
- estará escondido por defecto.
- O diálogo estará centrado horizontal e vertical.
/*CUSTOM VARIABLES HERE*/.modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; padding: 1rem; background: var(--black); cursor: pointer; visibility: hidden; opacity: 0; transition: all 0.35s ease-in;}
O diálogo terá un ancho máximo e altura. A súa altura será do 80% da altura da xanela. Nos casos en que a súa altura supera ese valor, aparecerá unha barra de desprazamento vertical:
/*CUSTOM VARIABLES HERE*/.modal-dialog { position: relative; max-width: 800px; max-height: 80vh; border-radius: 5px; background: var(--white); overflow: auto; cursor: default;}
Finalmente, definiremos algúns estilos simples para cada unha das seccións de contido :
/*CUSTOM VARIABLES HERE*/.modal-dialog > * { padding: 1rem;}.modal-header,.modal-footer { background: var(--lightgray);}.modal-header { display: flex; align-items: center; justify-content: space-between;}.modal-header .modal-close { font-size: 1.5rem;}.modal p + p { margin-top: 1rem;}
3. Alternar o modal
Unha páxina pode ter máis dun modal .. Pero como se mencionou anteriormente, todos os modos estarán escondidos no inicio.
Abre o modal
Do mesmo xeito que unha páxina pode ter máis dun activador aberto (elementos co atributo data-open debe coincidir coa identificación dun modal.
Aquí está o script que revela un modal:
e clases de CSS relevante:
.modal { visibility: hidden; opacity: 0; transition: all 0.35s ease-in;}.modal.is-visible { visibility: visible; opacity: 1;}
Pechar o modal
coa nosa implementación Unha vez que un modal só pode aparecer á vez (este código non admite modales aniñados). Como se mencionou na sección de marcación anterior, hai tres métodos dispoñibles para ocultalo cun efecto de desvanecemento (Fade-out).
Recapitamos.
Primeiro, premendo no elemento personalizado que está situado dentro do modal:
const closeEls = document.querySelectorAll("");const isVisible = "is-visible";for (const el of closeEls) { el.addEventListener("click", function() { this.parentElement.parentElement.parentElement.classList.remove(isVisible); });}
Segundo, premendo en calquera lugar fóra do modal:
const isVisible = "is-visible";document.addEventListener("click", e => { if (e.target == document.querySelector(".modal.is-visible")) { document.querySelector(".modal.is-visible").classList.remove(isVisible); }});
Neste caso, o modal (superposición) que se comporta como un peche xigante botón. Por este motivo, dálle a cursor: pointer.
Finalmente, presionando a tecla IV = “45968C3B6C” :
const isVisible = "is-visible";document.addEventListener("keyup", e => { if (e.key == "Escape" && document.querySelector(".modal.is-visible")) { document.querySelector(".modal.is-visible").classList.remove(isVisible); }});
é un bo momento para ver o que creamos ata agora:
O modal parece moi bo. Teña en conta que cada vez que facemos clic nun activador aberto, cobra o modal correspondente.
Tomemos outro paso e examine algunhas ideas para fomentar o seu diálogo.
4. Engade animacións ao
diálogo como indicamos antes, o comportamento por defecto do modal é o aspecto gradual (Fade-in) e esvaecido gradual (fade-out). Pero hai a opción de axustar o efecto de animación da xanela emerxente.
Xa creo que os efectos de animación suficientes que poderían usar como alternativa ao efecto de desvanecemento. Para facelo, simplemente ten que pasar o atributo a .modal.
Por exemplo, se o desexa O diálogo aparece cunha animación deslizante de esquerda a dereita, necesitará o efecto slideInOutLeft.
detrás de escenas, hai dúas regras que alcanzan esta animación:
/*CUSTOM VARIABLES HERE*/ .modal-dialog { opacity: 0; transform: translateX(-100%); transition: all 0.5s var(--bounceEasing);}.is-visible .modal-dialog { opacity: 1; transform: none; transition-delay: 0.2s;}
Comprobe o modal con este tipo de animación aquí:
Pode comprobar o resto das animacións mirando a pestana CSS de O proxecto de demostración final. Dependendo da complexidade das animacións, usei transicións de CSS ou animacións para crealas.
Tamén usei a función cubic-bezier() para axustar a función de tempo de todas as transicións. Se non che gusta o efecto de rebote que produce, non dubide en cambialo a algo máis suave a través da variable --bounceEasing CSS.
Mire a demostración final con todos os efectos Animación aquí:
Conclusión
Isto é todo, amigos! Durante este tutorial decatámosnos / decatámonos a crear diálogos personalizados de forma animada sen depender de calquera marco de front-end.
Espero que goces do resultado final e que a túa creación axudoulle a actualizar as túas habilidades dianteiras. Finalizar
Estar presente que non consideramos a accesibilidade, polo que se quere mellorar esta demostración, podería ser o seguinte paso.
Como sempre, grazas por ler!
Máis lecturas en ventás emerxentes
-
plugins de wordpressmáis de 20 dos mellores complementos de WordPress para Windows emerxentes e opt-innona blackman -
ui deseñoa mellor forma de usar Windows de diálogo (MODALS) no seu deseño webAdi purdila -
WordPressComo crear espectaculares ventás emerxentes en WordPress con Element ProAdi purPardila