Ventana modal adaptable simple en JavaScript puro

Vista prévia

Descripción

Una biblioteca JavaScript mínima que le permite mostrar una ventana modal adaptable en la página HTML.

Funcionamiento

Cree la ventana modal que está oculta en la carga de la página.

<div class="modal-wrap" id="modal-demo">

<div class="modal-container">


<div class="modal-header">



<h2 class="modal-title">Modal Title</h2>



<button class="close-modal">&times;</button>


</div>


<div class="modal-content">



<h3>Modal inner heading tag H3</h3>



<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestiae itaque quaerat animi praesentium accusamus




expedita rerum unde ipsum nihil est officia, quisquam sunt reiciendis, omnis placeat distinctio similique




illum minus.</p>



<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestiae itaque quaerat animi praesentium accusamus




expedita rerum unde ipsum nihil est officia, quisquam sunt reiciendis, omnis placeat distinctio similique




illum minus.</p>


</div>


<div class="modal-footer">



<p>Modal footer</p>


</div>

</div>
</div>

Los estilos CSS para el modal.

.modal-wrap {

background: rgba(0, 0, 0, 0.7);

height: 100%;

left: 0;

opacity: 0;

overflow: auto;

position: fixed;

top: 0;

visibility: hidden;

width: 100%;

z-index: 10;

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center;

-webkit-transition: all 0.3s ease-in-out;

transition: all 0.3s ease-in-out;
}

.modal-wrap.visible {

opacity: 1;

visibility: visible;
}

.modal-wrap .modal-container {

background: #fff;

margin: 1em;

max-width: 100%;

width: 600px;

z-index: 100;
}

.modal-wrap .modal-container .modal-header,
.modal-wrap .modal-container .modal-footer {

background: #000;

float: left;

width: 100%;
}

.modal-wrap .modal-header .modal-title {

color: #fff;

float: left;

font-size: 2em;

margin: 0;

padding: 15px 30px;
}

.modal-wrap .modal-header .close-modal {

background: transparent;

border: 0;

color: #fff;

cursor: pointer;

float: right;

font-size: 40px;

opacity: 0.4;

-webkit-transition: all 0.3s ease-in-out;

transition: all 0.3s ease-in-out;
}

.modal-wrap .modal-header .close-modal:hover { opacity: 1; }

.modal-wrap .modal-content {

float: left;

margin: 0;

padding: 15px 30px;

width: 100%;
}

.modal-wrap .modal-content p:last-child { margin-bottom: 0; }

.modal-wrap .modal-footer { text-align: center; }

.modal-wrap .modal-footer p {

color: #ccc;

font-size: 12px;

font-style: italic;

margin: 10px;
}

.modal-wrap .modal-footer a { color: #fff; }

Cree un botón de alternancia para abrir la ventana modal.

<button id="open-modal" class="triger-modal" data-triger="modal-demo">Open Modal</button>

El principal JavaScript.

// Modal button
var openModal = document.getElementById('open-modal');

// Modal ID
var modal = document.getElementById('modal-demo');

// Close modal button
var closeModal = document.getElementsByClassName('close-modal')[0];

// Open modal event listener
openModal.addEventListener('click', function(){


modal.classList.toggle('visible');
});

// Close modal event listener
closeModal.addEventListener('click', function(){


modal.classList.remove('visible');
});