Tiny HTML5 modal popup en Vanilla JavaScript-modal. js

Vista prévia

Descripción

Sólo otra biblioteca de JavaScript para crear popups modales que son totalmente controlables a través de atributos de datos HTML5.

Funcionamiento

Cree la ventana modal con los siguientes atributos de datos HTML:

• Data-modal-descartar: abrir/cerrar el modal
• Data-modal-contiene-Tabs = "false": pestaña Activar/desactivar entre campos de entrada
• Data-modal-Disable-scroll = "false": activar/desactivar el desplazamiento de página
• Data-modal-animación-duración = "300 ″: duración de la animación
• Data-modal-autofocus: enfoque automático cuando se abre el modal

<div class="modal-container"



id="modal-demo"



data-modal-dismiss



data-modal-contain-tabs="false"



data-modal-disable-scroll="false"


 data-modal-animation-duration="300">

<div class="modal">


<header class="modal-header">



<h2>Modal Title</h2>



<button class="modal-close" data-modal-dismiss></button>


</header>


<div class="modal-content">



<p> Modal Content</p>



<div>




<input type="text" placeholder="Text input" data-modal-autofocus>




<input type="text" placeholder="Text input" data-modal-autofocus>



</div>

</div>
</div>

Cree un botón para iniciar la ventana modal.

<button data-modal-open="modal-demo">Open</button>

Cargue el archivo JavaScript principal modal. js para activar la ventana modal.

<script src="dist/modal.min.js"></script>

Se siente libre de personalizar la ventana modal con sus propios estilos CSS.

.modal-container {

display: flex;

flex-direction: row;

justify-content: center;

align-items: flex-start;

height: 100%;

width: 100%;

position: fixed;

left: 0;

top: 0;

background-color: rgba(0,0,0,0.8);

visibility: hidden;

z-index: 5000
}

.modal-container.animate { transition: visibility .3s }

.modal-container.modal-open { visibility: visible }

.modal {

background-color: #FFF;

border-radius: 4px;

max-width: 600px;

min-width: 250px;

overflow: hidden
}

.modal.animate {

transform: scale(0.7);

opacity: 0;

transition: transform 0.3s, opacity .3s
}

.modal-open .modal.animate {

opacity: 1;

transform: scale(1)
}

.modal-container input {

margin-top: 10px;

margin-bottom: 10px
}

.modal-header {

position: relative;

background-color: rgba(80,100,100,0.3);

margin: 0;

padding: 15px 40px;

text-align: center
}

.modal-header h2 {

margin: 0;

color: #303030
}

.modal-close {

background-color: transparent;

border: none;

cursor: pointer;

height: 30px;

padding: 0;

position: absolute;

right: 5px;

top: 50%;

transform: translateY(-50%);

width: 30px;

z-index: 5001
}

.modal-close:focus { background-color: transparent }

.modal-close::before, .modal-close::after {

background-color: #828c8c;

content: "";

height: 3px;

left: 50%;

position: absolute;

top: 50%;

width: 20px
}

.modal-close:hover::before, .modal-close:hover::after, .modal-close:focus::before, .modal-close:focus::after { background-color: #303030 }

.modal-close::before { transform: translate(-50%, -50%) rotate(45deg) }

.modal-close::after { transform: translate(-50%, -50%) rotate(-45deg) }

.modal-content { padding: 15px 35px }

.modal-content p { font-size: 16px }

.modal-content > div { padding: 5px 10px }