rpragana/dialog-elem.html

## 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>
	<!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>