Use elementos de diálogo nativos do HTML5 e crie componentes modais facilmente

O rascunho do HTML 5.2 adiciona um novo elemento de diálogo. Mas é uma técnica experimental.

Anteriormente, se quiséssemos construir qualquer tipo de diálogo ou caixa de diálogo modal, precisávamos ter um plano de fundo, um botão Fechar, vincular eventos na caixa de diálogo, organizar nossa marcação de uma forma, encontrar uma maneira de passar a mensagem. conversar...é muito complicado. O elemento de diálogo resolve todos os problemas acima.

A seguir está a estrutura HTML de uma caixa modal de bootstrap:

 <!-- O botão aciona a caixa modal--><button class=btn btn-primary btn-lg data-toggle=modal data-target=#myModal> Comece a demonstrar a caixa modal</button><!-- Caixa Modal (Modal ) --><div class=modal fade id=myModal tabindex=-1 role=dialog aria-labelledby=myModalLabel aria-hidden=true> <div class=modal-dialog> <div class=modal-content> <div class=modal-header> <button type=button class=close data-dismiss=modal aria-hidden=true> </button> <h4 class; =modal-title id=myModalLabel> Título modal</h4> </div> <div class=modal-body> Adicione algum texto aqui</div> <div class=modal-footer> <button type=button class=btn btn-default data-dismiss=modal>Fechar</button> <button type=button class=btn btn-primary> Enviar alterações</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --></div>

A seguir está a estrutura HTML de uma caixa modal nativa:

 <!-- Botão aciona caixa modal--><button type=button class=btn>Mostrar caixa modal</button><!-- Caixa modal--><dialog open> caixa modal nativa HTML5</ dialog>

Vimos a marcação mais simples de um elemento de diálogo e você deve ter notado que open é um atributo no diálogo acima. Adicionar este atributo a um elemento forçará a exibição da caixa de diálogo, caso contrário ela será removida. A caixa de diálogo também será posicionada absolutamente na página.

A imagem acima mostra um estilo básico de caixa modal.

Abra o navegador e você verá que seu estilo básico é assim:

 diálogo { display: bloco: absoluto esquerda: 0px direita: 0px; largura da borda: inicial; estilo de borda: sólido; cor da borda: inicial; imagem da borda: preenchimento inicial: 1em;

O elemento dialog também introduz um novo seletor de pseudoclasse::backdrop O estilo ::backdrop padrão visualizado através do navegador é o seguinte:

 dialog::pano de fundo {posição: fixo superior: 0px; direita: 0px; esquerda: 0px;

Podemos estilizar o elemento de diálogo como qualquer elemento HTML, e quase qualquer estilo CSS servirá. Através do seletor de pseudoclasse ::backdrop, podemos utilizá-lo para definir o estilo do plano de fundo.

Por exemplo:

 caixa de diálogo{margem-top:200px; largura da borda:250px; altura da caixa:0 0 15px cinza claro;} caixa de diálogo: :pano de fundo {fundo: rgba(preto, .5);}

O efeito de estilo acima é o seguinte:

Abaixo está uma caixa de diálogo básica que não exibe nada visualmente porque o atributo open não está definido. Você precisa usar a API JavaScript para mostrar/ocultar:

 <dialog>Esta é uma caixa de diálogo! </dialog>

As APIs .show() e .close() do elemento dialog servem para exibir e fechar a caixa de diálogo, respectivamente. Usando essas duas APIs no elemento DOM, você pode exibir e fechar a caixa de diálogo.

Por exemplo:

 <!-- HTML --><dialog> <p>Esta é uma caixa de diálogo! </p> <button id=close>Fechar caixa de diálogo</button></dialog><button id=show>Mostrar caixa de diálogo</button> <!-- script --> <script> var dialog = document. querySelector(dialog); document.querySelector(#show).onclick = function(){ dialog.close(); };</script>

Você pode passar um parâmetro para dialog.close(). Ao ouvir o evento close do elemento dialog, a propriedade dialog.returnValue retornará o valor fornecido.

como:

 <!--HTML--><dialog> <p>Esta é uma caixa de diálogo! </p> <p><input type=text id=return_value value= placeholder=Insira conteúdo/></p> <button id=close>Fechar caixa de diálogo</button></dialog><button id=show >Mostrar caixa de diálogo</button><!--script--><script> var dialog = document.querySelector(dialog); document.querySelector(#show).onclick = function(){ dialog.showModal(); document.querySelector(#close).onclick = function(){ var val = document.querySelector(#return_value).value; elemento fechar evento dialog.addEventListener(close, function(){ alert(this.returnValue); });</script>

Outra API para exibir caixas de diálogo é .showModal()

Se você não quiser que o usuário interaja com objetos de elemento de página que não sejam a caixa de diálogo, use .showModal() para abrir a caixa de diálogo em vez de usar .show(). A caixa de diálogo aberta com .showModal() terá uma camada de fundo translúcida de janela inteira, impedindo o usuário de interagir com objetos de elementos de página fora da caixa de diálogo. Ao mesmo tempo, a caixa de diálogo será exibida no meio da janela. por padrão (centralizado na parte superior, inferior, esquerda e direita)); e a caixa de diálogo aberta com .show() será exibida na parte superior da janela por padrão (a exibição centralizada pode ser obtida através de css).

Depois de fechar a caixa de diálogo, fechar aciona um evento. Além disso, o usuário pode fechar a caixa de diálogo modal digitando a tecla Escape. Isso irá disparar o evento de cancelamento que você pode cancelar usando event.preventDefault().

Você pode usar form[method=dialog] para integrar um formulário com um elemento <dialog>. Depois que o formulário é enviado, ele fecha a caixa de diálogo e define dialog.returnValue como o valor do botão de envio que foi usado.

Além disso, você pode usar a propriedade autofocus para focar automaticamente nos controles do formulário na caixa de diálogo quando ela for exibida.

Por exemplo:

 <!--HTML--><dialog id =dialog> <form method =dialog> <p>Você concorda com os Termos de Uso? </p> <p><textarea class =form-control desativado>Os termos exigem...</textarea></p> <button type =submit value =Sim>Sim</button> <button type =submit value = Sem foco automático>Não</button> </form></dialog><button id=show>Mostrar caixa de diálogo do formulário</button><!--script--><script> var dialog = document.querySelector(dialog) ; document.querySelector(#show).onclick = function(){ dialog.showModal() } //Ouvir o evento de fechamento do elemento de diálogo dialog.addEventListener(close, function(e){ if(this.returnValue = == Sim ){ alert(this.returnValue) //dosomething... }else{ alert(this.returnValue) //dosomething... });</script>

Entre os navegadores de desktop, apenas o Google Chrome oferece suporte a todas as funcionalidades do diálogo (no momento desta postagem do blog). Para obter compatibilidade entre navegadores, use dialog-polyfill.

<iframe src=//caniuse.com/dialog/embed scrolling=no permittransparency=true allowfullscreen=true frameborder=0></iframe>

Artigo de referência: Demonstração do elemento de diálogo

biblioteca de funções normalmentejs: https://github.com/JofunLiang/normalmentejs

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.