Skip to content

Instantly share code, notes, and snippets.

@rpragana

rpragana/dialog-elem.html

Created June 3, 2018 15:55
Show Gist options
  • Save rpragana/f224469d190e3fb6996104a69d618973 to your computer and use it in GitHub Desktop.
Save rpragana/f224469d190e3fb6996104a69d618973 to your computer and use it in GitHub Desktop.
Download ZIP
O elemento <dialog>
Raw
dialog-elem.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Uma página HTML</title>
<link href="bulma.css" rel="stylesheet">
<style>
dialog.sombreado {
border: 1px solid #008;
border-radius: 6px;
box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.3);
}
.bdialog::backdrop {
background-color: rgba(0,0,20,0.8);
}
</style>
</head>
<body>
<dialog class="dialog bdialog"
id="corDialogo" onsubmit="javascript:enviaDialogo()">
<form class="form" method="dialog">
<section class="section">
<p><label for="corSelecionada">Cor selecionada:</label>
<select class="select" id="corSel">
<option></option>
<option>Azul</option>
<option>Vermelho</option>
<option>Amarelo</option>
<option>Verde</option>
<option>Branco</option>
<option>Preto</option>
</select></p>
</section>
<section class="section">
<button class="button is-warning"
id="cancel" type="reset">Desiste</button>
<button class="button is-primary"
type="submit" value="1">Confirma</button>
<button class="button is-primary"
type="button" onclick="fechaDialogo()">Fecha</button>
</section>
</form>
</dialog>
<dialog class="dialog sombreado">
<h2>Diálogo com mensagem</h2>
<p>Este diálogo tem uma caixa e sombra.</p>
<button class="button is-warning"
onclick="fechaSombreado()">fecha</button>
</dialog>
<section class="section">
<button class="button is-success" id="mostraDialogo" onclick="javascript:mostraDialogo(0)"
>mostra diálogo (open)</button>
<button class="button is-success" id="mostraDialogo" onclick="javascript:mostraDialogo(1)"
>mostra diálogo (show)</button>
<button class="button is-success" id="mostraDialogo" onclick="javascript:mostraDialogo(2)"
>mostra diálogo (showModal)</button>
<button class="button is-info" onclick="javascript:mostraDialogo(3)"
>mostra diálogo sombreado</button>
<button class="button is-warning" onclick="javascript:valoresRetornados()"
>valores retornados</button>
</section>
<p>Selecionado: <span id="selVal"></span></p>
<p>Valores retornados: <span id="retval"></span></p>
<script>
function mostraDialogo(i){
var d = document.querySelector("#corDialogo");
var d1 = document.querySelector(".sombreado");
switch (i) {
case 0: d.setAttribute("open",true);
break;
case 1: d.show();
break;
case 2: d.showModal();
break;
case 3: d1.showModal();
break;
}
}
function enviaDialogo(){
var e = document.querySelector("#corSel");
var v = e.options[e.selectedIndex].text;
document.querySelector("#selVal").textContent=v;
}
function fechaDialogo() {
var e = document.querySelector("#corDialogo");
e.close("diálogo fechado (sem submit)");
}
function fechaSombreado(){
var e = document.querySelector(".sombreado");
e.close("diálogo com sombra");
}
function valoresRetornados() {
var v1 = document.querySelector("#corDialogo").returnValue;
var v2 = document.querySelector(".sombreado").returnValue;
document.querySelector("#retval").textContent="v1="+v1+", v2="+v2;
}
var dlg = document.querySelector(".bdialog");
dlg.addEventListener('click',function(){
console.log("CLICK no backdrop detectado");
});
dlg.addEventListener('close',function(){
console.log("CLOSE detectado");
});
dlg.addEventListener('cancel',function(){
console.log("CANCEL detectado");
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment