Pequeña ventana modal adaptable en Vanilla JavaScript

Vista prévia

Descripción

RV-Vanilla-modal es un pequeño módulo modal responsivo hecho con CSS/CSS3 y vainilla JavaScript.

Funcionamiento

Cargue el script RV-Vanilla-modal. js en su página web.

<script src="js/rv-vanilla-modal.js"></script>

Cree un botón para alternar el modal.

<button data-rv-vanilla-modal="#targer-modal">Show modal</button>

Cree el contenido principal para el modal. Asegúrese de que el ID coincida con el atributo Data-RV-Vanilla-modal .

<div id="target-modal" class="rv-vanilla-modal">

<div class="rv-vanilla-modal-header group">


<button class="rv-vanilla-modal-close"><span class="text">×</span></button>


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

</div>

<div class="rv-vanilla-modal-body">


<p>Modal Content</p>

</div>
</div>

Habilite el modal.

document.addEventListener('DOMContentLoaded', function() {

/* global RvVanillaModal */

'use strict';

var modal = new RvVanillaModal({



showOverlay: true

});


// each method

modal.each(function(element) {


 var target = element.getAttribute('data-rv-vanilla-modal');


 var targetElement = document.querySelector(target);


 var closeBtn = targetElement.querySelector(modal.settings.closeSelector);



 // close click listerner


 closeBtn.addEventListener('click', function(event) {



event.preventDefault();



modal.close(targetElement);


 });



 // open click listerner


 element.addEventListener('click', function(event) {



event.preventDefault();



modal.open(targetElement);


 });

});
}, false);

El CSS de ejemplo para el estilo modal.

.rv-vanilla-modal {

position: absolute;

top: -100%;

left: 50%;

width: 45%;

min-height: 300px;

margin: -300px 0 0 -22.5%;

background: #fff;

z-index: 10;

-webkit-transition: .3s all ease-out;

transition: .3s all ease-out;

border-radius: 4px;

-webkit-box-shadow: 0 0 6px 0 rgba(0,0,0,.3);

box-shadow: 0 0 6px 0 rgba(0,0,0,.3)
}

.rv-vanilla-modal-is-open { top: 50% }

.rv-vanilla-modal-overlay {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

background: rgba(0,0,0,.5);

opacity: 0;

display: none;

-webkit-transition: .4s opacity linear;

transition: .4s opacity linear
}

.rv-vanilla-modal-overlay.is-shown {

opacity: 1;

display: block
}

.rv-vanilla-modal-header {

padding: 20px;

background: #3CB3E7;

border-radius: 4px 4px 0 0
}

.rv-vanilla-modal-body {

padding: 25px 20px 20px;

overflow: auto;

color: #555
}

.rv-vanilla-modal-body p {

line-height: 150%;

margin: 0 0 1em
}

.rv-vanilla-modal-title {

color: #fff;

margin: 0;

font-size: 18px;

font-weight: 300
}

.rv-vanilla-modal-close {

color: #1a9dd6;

font-size: 16px;

float: right;

display: inline-block;

width: 26px;

height: 26px;

line-height: 26px;

text-align: center;

border-radius: 50%;

border: 0;

cursor: pointer;

background: rgba(255,255,255,.4);

-webkit-transition: all .2s linear;

transition: all .2s linear
}

.rv-vanilla-modal-close .text {

position: relative;

top: -1px
}

.rv-vanilla-modal-close:hover {

color: #1996cd;

background: rgba(255,255,255,.5)
}

.hidden {

display: none!important;

visibility: hidden
}

.group:after,
.group:before {

content: "";

display: table
}

.group:after { clear: both }

.centered { text-align: center }