Ventana modal simple con JavaScript y CSS

Vista prévia

Descripción

Hace uso de JavaScript y CSS sin formato para crear ventanas emergentes modales adaptables en la pantalla.

Funcionamiento

Cree el contenido modal como sigue:

<div id="simpleModal" class="modal">

<div class="modal-content">


<span class="closeBtn">&times;</span>


<p>Hello... I am a modal</p>

</div>
</div>

Cree un botón para alternar el modal.

<button id="modalBtn" class="button">Launch</button>

Estilo de la ventana modal en el CSS.

.modal {

display: none;

position: fixed;

z-index: 1;

left: 0;

top: 0;

height: 100%;

width: 100%;

overflow: auto;

background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {

background-color: #f4f4f4;

margin: 20% auto;

padding: 20px;

width: 70%;

box-shadow: 0 5px 8px 0px rgba(0, 0, 0, 0.2), 0 7px 20px 0px rgba(0, 0, 0, 0.17);

animation-name: modalopen;

animation-duration: 1s;
}

.closeBtn {

color: #ccc;

float: right;

font-size: 30px;
}

.closeBtn:hover, .closeBtn:focus {

color: #000;

text-decoration: none;

cursor: pointer;
}

@keyframes
 modalopen {
from {
opacity: 0
}

to { opacity: 1 }
}

El principal JavaScript.

// Get modal element
var modal = document.getElementById('simpleModal');

// Get open modal button
var modalBtn = document.getElementById('modalBtn');

//Get close button
var closeBtn = document.getElementsByClassName('closeBtn')[0];

// Listen for open click
modalBtn.addEventListener('click', openModal);

// Listen for close click
closeBtn.addEventListener('click', closeModal);

// Listen for outside click
window.addEventListener('click', clickOutside)

// Function to open modal
function openModal() {

modal.style.display = 'block';
}

// Function to close modal
function closeModal() {

modal.style.display = 'none';
}

// Function to close modal if outside click
function clickOutside(e) {

if (e.target == modal) {


modal.style.display = 'none';

}

}