Cuadro de diálogo modal bastante simple en JavaScript puro-tiModal

Vista prévia

Descripción

tiModal es una librería JavaScript muy simple para crear ventanas modales y cuadros de diálogo de alerta/confirmación/prompt en la Página Web.

Funcionamiento

Cargue el archivo timodal. js justo antes de la etiqueta body de cierre.

<script src="timodal.js"></script>

Cree su propio contenido modal como este:

<div class="popup-wrapper" id="default-modal">

Hello my friend!

<br/>

This is a default modal

<br/>

<b>Click on overlay to hide me.</b>
</div>

Cree un botón para desencadenar el modal.

<button id="show-default-modal">Default modal</button>

Active el modal.

var button = document.querySelector('#show-default-modal');
button.addEventListener('click', function(){

var modal = FlexModal.create('#default-modal');

modal.render();
});

Los estilos CSS predeterminados para el modal.

/* REQUIRED CSS */

.tioverlay {

position: fixed;

z-index: 100;

top: 0px;

left: 0px;

height: 100%;

width: 100%;

display: none;

text-align: center;

overflow-y: auto;
}

/* CUSTOM CSS*/

.popup-wrapper {

margin: 20px auto;

display: inline-block;

background: #fff;

border-radius: 3px;

padding: 30px;

text-align: left;
}

.popup-content-wrapper .close-btn {

position: absolute;

top: 20px;

right: 20px;

width: 25px;

height: 25px;

text-align: center;

line-height: 25px;

z-index: 20;

padding: 0;
}

Configuración predeterminada.

FlexModal.create('#default-modal',{

backgroundColor: "rgba(0,0,0,0.5)",

events: {}, // custom events

modal: false // modal mode
})