xmodalv2

<p>Modal com diversas funcionalidades, onClose, onOpen, isOpen, control Esc</p>

Usage no npm install needed!

<script type="module">
  import xmodalv2 from 'https://cdn.skypack.dev/xmodalv2';
</script>

README

xModal v2.0.0

O xModal é uma janela de diálogo personalizada inspirada inicialmente no showModal do Delphi. Ele usa nativamente javascript em sua construção.

Instalação
Importando
Modo de Uso
Temas
Parâmetro Create
Métodos
Desenvolvedores

Instalação

Importando

Forma 1

Em seu html declare o css:

<link rel="stylesheet" href="./xModal.css" />

Para usar o xModal você deve chamá-lo em seu arquivo .js através de import.

import xModal from './xModal';

Forma 2

Em seu html declare o arquivo js.

<link rel="stylesheet" href="./xModal.css" />
<script src="./xModal.js"></script>

É necessário comentar/descomentar as linhas no arquivo xModal.js:

    export default (function() { //comentar essa linha
    let xModal = (function() { // descomentar essa linha

Modo de Uso

É necessário uma div no seu html com um id

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <title>xModal v1.0</title>
  </head>
  <body>
    <div id="minhaDiv">Hello World!</div>
    <script src="index.js" type="module"></script>
  </body>
</html>

No javascript iremos instanciar o objeto da seguinte forma:

Create

const minhaDiv = new xModal.create({
  el: '#minhaDiv',
});

//// Abre o modal
minhaDiv.open();

Temas

xModal-blue xModal-opacity xModal-dark xModal-dark-square xModal-bublue

Parâmetro Create

Create é responsável por instanciar o xModal. Recebe um objeto como parâmetro que pode ter as seguintes propriedades passadas:

Propriedade Descrição Tipo Default
el Id do elemento (div) onde será instanciado o xModal. (Obrigatório) String
title Título da janela. String Mensagem do Sistema
width Largura da janela. Numeric 75%
height Altura da janela. Numeric 75%
resize Propriedade que informa se poderá redimensionar a janela. Boolean False
theme Tema que será utilizado na janela, temas disponíveis:
xModal-blue, xModal-opacity, xModal-dark 		String xModal-blue
left Define a posição (left) onde a janela será aberta. Numeric
top Define a posição (top) onde a janela será aberta. Numeric
fullScreen Caso queira que a janela abre em tela cheia, informe true. Boolean False
closeBtn Mostra o botão fechar no canto superior direito da janela Boolean True
esc Determina se o botão esc pode fechar o modal. Boolean True
modal Limita o acesso apenas a janela aberta. Boolean True
titleDisplay Possibilita a visualização ou não da barra de título da janela. Boolean True
onCreate Função que será executada ao instanciar o objeto, só executa uma vez. Function
onOpen Função que será executada sempre que abrir a janela. Function
onClose Função que será executa sempre que fechar a janela. Function
setTheme Função que seta o thema para novas intancias. xModal.setTheme('xModal-dark-square') string xModal-bublue
changeTheme Função que altera todas as intancias corrente e seta o thema para a futuras intancias. xModal.changeTheme('xModal-dark-square') string
onKeyDown Permite a janela escutar pressionamento de teclas e executar uma função para as teclas determinadas.
onKeyDown:{
    13: (e)=>{console.log('enter pressionado')},
    'ctrl+13': (e)=>{console.log('ctrl+enter pressionado')}
    'ctrl+shift+alt+13': (e)=>{
        console.log('ctrl+shift+alt+13 pressionado')}
    }
 Object
buttons Botões que irão aparecer na janela.
buttons:{
    btn1:  // identificador do botão
    {
        html: 'Confirma', //texto do botão
        class: 'left',    // class do botão (opcional)
        click: (e)=>{
            // função que será executada ao
            clicar no botão
        }
    },
    btn2:{ // pode ser adicionado n botões }
}
Object
execAfter Invoca o clique do botão após determinado tempo. 
execAfter{
            time: 10,           // tempo em segundos
            btn: 'confirma'     // nome do btn
        }
 Object

Métodos

Esses métodos serão utilizados na variável instanciada. Ex.:

minhaDiv.close();
Método Parâmetro Descrição
btnFocus nameBtn: String Coloca o foco no botão passado por parâmetro.
btnDisable nameBtn: String Desabilita o botão passado por parâmetro.
btnEnable nameBtn: String Habilita o botão passado por parâmetro.
btnClick nameBtn: String Clica no botão passado por parâmetro.
setTitle title: String Altera o título da janela.
open nenhum Abre a janela de diálogo.
close nenhum Fecha a janela de diálogo.
destroy nenhum Destrói a instância criada.

Desenvolvedores

Francisco Alves
Guilherme Trindade