const DEVELOPER_INFO = {
'autor': 'Matheus Johann Araújo',
'country': 'Brasil',
'state': 'Pernambuco',
'date': '2020-12-21'
}O POPUP é uma biblioteca que implementa as funções Alert, Confirm e Prompt do JavaScript de forma padronizada e assíncrona em todos os navegadores modernos.
Utiliza a tecnologia de Web Components que permite a criação de tags customizadas.
A biblioteca não necessita de instalação de plugins adicionais! Requer somente a inclusão do arquivo de script conforme é descrito abaixo.
Clique aqui para visualizar o funcionamento online
- Escreva em seu projeto:
<!-- INCLUINDO BIBLIOTECA -->
<script src="popup.js"></script>- A primeira maneira é escrevendo o nome da TAG
<popup-js>
<!-- INCLUINDO BIBLIOTECA -->
<script src="popup.js"></script>
<!-- USANDO POR TAG -->
<popup-js>
<label slot="title">Alert</label>
<p slot="body">Hello, welcome to popup-js.</p>
</popup-js>- A segunda forma é através da utilização do JavaScript
popup()
<!-- INCLUINDO BIBLIOTECA -->
<script src="popup.js"></script>
<!-- USANDO POR JAVASCRIPT -->
<script>
window.addEventListener("load", async () => {
await popup()
.title("Alert")
.body("Hello, welcome to popup-js.")
.show()
})
</script>style-> Estilo CSS;top-> Topo de cima;left-> Lateral esquerda;body-> Define o corpo do popup;title-> Define o título do popup;content-> Define o conteúdo para o popup;seconds-> Tempo do popup em tela;btn_ok-> Renomear o texto do botão OK;btn_cancel-> Renomear o texto do botão Cancel;light-> Define o tema do popup como light (claro);dark-> Define o tema do popup como dark (escuro);theme-> Define o tema do popup, dark (escuro) e light (claro);callback-> Função chamada quando o popup sair da tela;type-> alert, confirm e prompt são tipos de popup;alert-> Define o popup como tipo de alert (alerta);prompt-> Define o popup como tipo de prompt (pergunta);confirm-> Define o popup como tipo de confirm (confirmação);config-> Objeto JSON que contém todas as configurações descritas acima;show-> Função responsável por adicionar o popup para lista de exibição no navegador.
O atributo data-config="{}" deve conter um JSON (objeto chave-valor), com as configurações de exibição do <popup-js>
- Exemplo de uso por TAG
<popup-js>e por meio da funçãopopup()do JavaScript:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>example</title>
</head>
<body>
<!-- INCLUINDO BIBLIOTECA -->
<script src="popup.js"></script>
<!--#########################################-->
<!-- INÍCIO - USANDO ATRAVÉS DE TAG #########-->
<!-- USANDO ALERT -->
<popup-js data-config="{
'type': 'alert',
'seconds': 5,
'callback': 'console.log'
}">
<label slot="title">Alert</label>
<p slot="body">Olá, seja bem-vindo ao popup-js.</p>
</popup-js>
<!-- USANDO CONFIRM -->
<popup-js data-config="{
'type': 'confirm',
'seconds': 5,
'callback': 'console.log'
}">
<label slot="title">Confirm</label>
<label slot="body">Deseja continuar?</label>
</popup-js>
<!-- USANDO PROMPT -->
<popup-js data-config="{
'type': 'prompt',
'seconds': 5,
'callback': 'console.log',
'top': '50px',
'left': '50px',
'style': {
'color': '#000',
'background': '#fff'
}
}">
<label slot="title">Prompt</label>
<div slot="body">
<label>Qual o seu nome?</label>
<input type="text" placeholder="NOME" id="inp">
</div>
</popup-js>
<!-- FIM - USANDO ATRAVÉS DE TAG ############-->
<!--#########################################-->
<!-- INÍCIO - USANDO ATRAVÉS DO JAVASCRIPT ##-->
<script>
window.addEventListener("load", async () => {
// USANDO ALERT
await popup()
.alert()
.seconds(5)
.callback("console.log")
.title("Alert")
.body("Olá, seja bem-vindo ao popup-js.")
.show()
// USANDO CONFIRM
await popup()
.confirm()
.seconds(5)
.callback("console.log")
.title("Confirm")
.body("Deseja continuar?")
.show()
// USANDO PROMPT
await popup()
.config({
'type': 'prompt',
'seconds': 5,
'callback': 'console.log',
'top': '50px',
'left': '50px',
'style': {
'color': '#000',
'background': '#fff'
}
})
.content(`
<label slot="title">Prompt</label>
<div slot="body">
<label>Qual o seu nome?</label>
<input type="text" placeholder="NOME" id="inp">
</div>
`)
.show()
})
</script>
<!-- FIM - USANDO ATRAVÉS DO JAVASCRIPT #####-->
</body>
</html>