Ventana modal simple con efecto de desenfoque de fondo

Vista prévia

Descripción

Una biblioteca JavaScript sencilla y ligera de vainilla que le permite crear una ventana modal mientras desenfoca el contenido de fondo para centrar la atención de su usuario en el contenido modal.

Funcionamiento

La estructura HTML de la ventana modal.

<div id="myModal" class="Modal is-hidden is-visuallyHidden">

<!-- Modal content -->

<div class="Modal-content">


<span id="closeModal" class="Close">&times;</span>


<p>Simple Modal</p>

</div>
</div>

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

<button id="myBtn">Open Modal</button>

Los principales estilos CSS para la ventana modal.

.Modal {

display: block;

position: fixed;

left: 0;

top: 0;

z-index: 9999;

width: 100%;

height: 100%;

padding-top: 100px;

background-color: black;

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

-webkit-transition: 0.5s;

overflow: auto;

transition: all 0.3s linear;
}

.Modal-content {

background-color: #fefefe;

margin: auto;

padding: 20px;

border-radius: 4px;

max-width: 300px;

height: 450px;
}

.ModalOpen { overflow: hidden; }

.is-hidden { display: none; }

.is-visuallyHidden { opacity: 0; }

Estilo y posición del botón de cierre modal.

.Close {

color: #aaaaaa;

float: right;

font-size: 16px;
}

.Close:hover, .Close:focus {

color: #000;

text-decoration: none;

cursor: pointer;
}

Difumina el contenido principal con filtros CSS3.

.is-blurred {

filter: blur(2px);

-webkit-filter: blur(2px);
}

El principal JavaScript.

// Get the modal
var modal = document.getElementById('myModal');

// Get the main container and the body
var body = document.getElementsByTagName('body');
var container = document.getElementById('myContainer');

// Get the open button
var btnOpen = document.getElementById("myBtn");

// Get the close button
var btnClose = document.getElementById("closeModal");

// Open the modal
btnOpen.onclick = function() {


modal.className = "Modal is-visuallyHidden";


setTimeout(function() {



container.className = "MainContainer is-blurred";



modal.className = "Modal";


}, 100);


container.parentElement.className = "ModalOpen";
}

// Close the modal
btnClose.onclick = function() {


modal.className = "Modal is-hidden is-visuallyHidden";


body.className = "";


container.className = "MainContainer";


container.parentElement.className = "";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {


if (event.target == modal) {




modal.className = "Modal is-hidden";




body.className = "";




container.className = "MainContainer";




container.parentElement.className = "";


}
}