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
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';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É 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:
const minhaDiv = new xModal.create({
el: '#minhaDiv',
});
//// Abre o modal
minhaDiv.open();| xModal-blue | xModal-opacity | xModal-dark | xModal-dark-square | xModal-bublue |
|---|---|---|---|---|
 |
 |
 |
 |
 |
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 |
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. |