Modales w3css

Utilidad para mostrar modales en el explorador. Utilizamos w3css para mostrar la modal.

Modal

Se utiliza solo para informar.

Uso

import {Modal} from 'modales-w3css';

let modal = new Modal();

modal.innerHtml = `<h1>Hola mundo</h1>`;
modal.open();

Nota: Si solo va usar la modal importe directamente desde su archivo

import {Modal} from 'modales-w3css/modal';

Ejemplo

Atributos

innerHtml: string Se usa para definir el contenido de la modal se utiliza la propiedad innerHtml.

modal.innerHtml = `
<div class="w3-panel w3-green">
  <h3>Success!</h3>
  <p>Green often indicates something successful or positive.</p>
</div> 
`;

titulo: string Se usa para definir el título de la modal.

modal.titulo = `Título de la modal`;

opciones.aceptar: string Se usa para definir el texto del botón aceptar, por defecto Aceptar;

modal.opciones.aceptar = `Sí`;

opciones.cancelar: string Se usa para definir el texto del botón cancelar, por defecto Cancelar;

modal.opciones.cancelar = `No`;

opciones.hostw3css: string Se usa para definir el host de w3css, por defecto es https://www.w3schools.com/w3css/4/w3.css.

modal.opciones.hostw3css = `css/w3.css`;

opciones.colorActivo: string Se usa para definir el color activo de la modal, por defecto es w3-blue.

modal.opciones.colorActivo = `w3-black`;

opciones.colorCancelar: string Se usa para definir el color cancelar de la modal, por defecto es w3-red.

modal.opciones.colorCancelar = `w3-black`;

opciones.colorFondo: string Se usa para definir el color cancelar de la modal, por defecto es w3-white.

modal.opciones.colorFondo = `w3-indigo`;

opciones.borderRadius: string Se usa para definir el radio de los bordos, por defecto es 0.

modal.opciones.borderRadius = `0 0 10px 10px`;

opciones.ancho: string Se usa para definir el ancho de la modal, por defecto es 50%.

modal.opciones.ancho = `300px`;

Métodos

open(): Promise Se usa para saber la respuesta de abrir la ventana, se utiliza la función open.

modal.open().then(res => {
    //presiono el botón x de la modal
    if (res.op === 'cerrar') {
        console.log('modal cerrada');
    }
    if (res.op === 'cancelar') {
        console.log('modal cancelada');
    }
    if (res.op === 'aceptar') {
        console.log('modal aceptar');
    }
});

Usar formularios

Puede usar formularios para obtener datos del formulario.

modal.innerHtml = `
<div class="w3-panel w3-green">
  <h3>Dime tu nombre</h3>
  <form class="w3-container">
    <p>
    <div class="w3-margin-top">
    <label for="nombre"><b>Nombre:</b></label>
    <input type="text" name="nombre" class="w3-input w3-border"/>
    </p>
</form>
</div> 
`;

Los elementos del formulario estan contenidos dentro del objecto de respuesta en la llave data.

modal.open().then(res => {
    console.log(res.data);
});

Ejemplo

Modal Aceptar

Es una modal que cuenta con el boton de cerrar y el boton de Aceptar. Extiende de la clase Modal por lo que todos los atributos y métodos son los mismos.

Uso

import {ModalAceptar} from 'modales-w3css';

let modal = new ModalAceptar();

modal.innerHtml = `<h1>modal cerrar</h1>`;
modal.open();

Nota: Si solo va usar la modal importe directamente desde su archivo

import {ModalAceptar} from 'modales-w3css/modal-aceptar';

Modal cerrar

Es una modal que solo cuenta con el boton de cerrar. Extiende de la clase Modal.

Uso

import {ModalCerrar} from 'modales-w3css';

let modal = new ModalCerrar();

modal.innerHtml = `<h1>modal cerrar</h1>`;
modal.open();

Nota: Si solo va usar la modal importe directamente desde su archivo

import {ModalCerrar} from 'modales-w3css/modal-cerrar';