Utilice elementos de diálogo nativos HTML5 y cree fácilmente componentes modales

El borrador HTML 5.2 agrega un nuevo elemento de diálogo. Pero es una técnica experimental.

Anteriormente, si queríamos crear cualquier tipo de diálogo modal o cuadro de diálogo, necesitábamos tener un fondo, un botón de cierre, vincular eventos en el cuadro de diálogo, organizar nuestro marcado de una manera, encontrar una manera de pasar el mensaje. hablar...es realmente complicado. El elemento de diálogo resuelve todos los problemas anteriores.

La siguiente es la estructura HTML de un cuadro modal de arranque:

 <!-- El botón activa el cuadro modal--><button class=btn btn-primary btn-lg data-toggle=modal data-target=#myModal> Comenzar a demostrar el cuadro modal</button><!-- Cuadro modal (Modal ) --><div class=id de desvanecimiento modal=myModal tabindex=-1 role=dialog aria-labelledby=myModalLabel aria-hidden=true> <div class=modal-dialog> <div class=modal-content> <div class=modal-header> <tipo de botón=clase de botón=cerrar data-dismiss=modal aria-hidden=true> </button> <h4 class =modal-title id=myModalLabel> Título modal</h4> </div> <div class=modal-body> Agregue algo de texto aquí</div> <div class=modal-footer> <button type=button class=btn btn-default data-dismiss=modal>Cerrar</button> <button type=button class=btn btn-primary> Enviar cambios</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --></div>

La siguiente es la estructura HTML de un cuadro modal nativo:

 <!-- El botón activa el cuadro modal--><button type=button class=btn>Mostrar cuadro modal</button><!-- Cuadro modal--><diálogo abierto> Cuadro modal nativo HTML5</diálogo>

Hemos visto el marcado más simple de un elemento de diálogo y es posible que hayas notado que abrir es un atributo en el diálogo de arriba. Agregar este atributo a un elemento forzará la aparición del cuadro de diálogo; de lo contrario, se eliminará. El cuadro de diálogo también se ubicará absolutamente en la página.

La imagen de arriba muestra un estilo de cuadro modal básico.

Abra el navegador y podrá ver que su estilo básico es así:

 diálogo {pantalla: bloque; posición: absoluta; izquierda: 0px; derecha: 0px; ancho: -webkit-fit-content; color: negro; estilo de borde: sólido; color de borde: inicial; imagen de borde: inicial; relleno: 1em;

El elemento de diálogo también introduce un nuevo selector de pseudoclase::backdrop. El estilo predeterminado ::backdrop visto a través del navegador es el siguiente:

 diálogo::fondo { posición: fijo; arriba: 0px; abajo: 0px; fondo: rgba(0, 0, 0, 0.1);

Podemos diseñar el elemento de diálogo como cualquier elemento HTML, y casi cualquier estilo CSS servirá. A través del selector de pseudoclase ::backdrop, podemos usarlo para establecer el estilo del fondo.

Por ejemplo:

 cuadro de diálogo {margen-superior: 200 px; ancho: 250 px; alto: 250 px; alineación de texto: centro; altura de línea: 250 px; radio de borde: 4 px; borde: ninguno; : telón de fondo { fondo: rgba (negro, .5);}

El efecto de estilo anterior es el siguiente:

A continuación se muestra un cuadro de diálogo básico que no muestra nada visualmente porque el atributo de apertura no está configurado. Necesita utilizar la API de JavaScript para mostrarlo/ocultarlo:

 <dialog>¡Este es un cuadro de diálogo! </diálogo>

Las API .show() y .close() del elemento de diálogo sirven para mostrar y cerrar el cuadro de diálogo respectivamente. Al utilizar estas dos API en el elemento DOM, puede mostrar y cerrar el cuadro de diálogo.

Por ejemplo:

 <!-- HTML --><dialog> <p>¡Este es un cuadro de diálogo! </p> <button id=close>Cerrar cuadro de diálogo</button></dialog><button id=show>Mostrar cuadro de diálogo</button> <!-- script --> <script> var dialog = documento. querySelector(dialog); document.querySelector(#show).onclick = function(){ dialog.show() }; };</script>

Puede pasar un parámetro a dialog.close(). Al escuchar el evento de cierre del elemento de diálogo, la propiedad dialog.returnValue devolverá el valor dado.

como:

 <!--HTML--><dialog> <p>¡Este es un cuadro de diálogo! </p> <p><input type=text id=return_value value= placeholder=Por favor ingrese contenido/></p> <button id=close>Cerrar cuadro de diálogo</button></dialog><button id=show >Mostrar cuadro 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 cerrar evento dialog.addEventListener(close, function(){ alert(this.returnValue); });</script>

Otra API para mostrar cuadros de diálogo es .showModal()

Si no desea que el usuario interactúe con objetos de elementos de página que no sean el cuadro de diálogo, utilice .showModal() para abrir el cuadro de diálogo en lugar de utilizar .show(). El cuadro de diálogo abierto con .showModal() tendrá una capa de fondo translúcido de ventana completa, lo que impedirá que el usuario interactúe con objetos de elementos de página fuera del cuadro de diálogo. Al mismo tiempo, el cuadro de diálogo se mostrará en el medio de la ventana. de forma predeterminada (centrado arriba, abajo, izquierda y derecha)); y el cuadro de diálogo abierto con .show() se mostrará en la parte superior de la ventana de forma predeterminada (la visualización centrada se puede lograr a través de CSS).

Después de cerrar el cuadro de diálogo, el cierre desencadena un evento. Además, el usuario puede cerrar el cuadro de diálogo modal ingresando la tecla Escape. Esto activará el evento de cancelación que puede cancelar usando event.preventDefault().

Puede utilizar form[method=dialog] para integrar un formulario con un elemento <dialog>. Una vez enviado el formulario, cierra el cuadro de diálogo y establece dialog.returnValue en el valor del botón de envío que se utilizó.

Además, puede utilizar la propiedad de enfoque automático para centrarse automáticamente en los controles del formulario dentro del cuadro de diálogo cuando aparece.

Por ejemplo:

 <!--HTML--><dialog id =dialog> <form método =dialog> <p>¿Está de acuerdo con los Términos de uso? </p> <p><textarea class =form-control deshabilitado>Términos y requisitos...</textarea></p> <tipo de botón =enviar valor =Sí>Sí</button> <tipo de botón =enviar valor = Sin enfoque automático>No</button> </form></dialog><button id=show>Mostrar diálogo de formulario</button><!--script--><script> var dialog = document.querySelector(dialog) ; document.querySelector(#show).onclick = function(){ dialog.showModal() } //Escucha el evento de cierre del elemento de diálogo dialog.addEventListener(close, function(e){ if(this.returnValue = == Sí ){ alerta(this.returnValue) //hacer algo... }else{ alerta(this.returnValue) //hacer algo... });</script>

Entre los navegadores de escritorio, solo Google Chrome admite la funcionalidad completa del diálogo (al momento de esta publicación de blog). Para lograr compatibilidad entre navegadores, utilice dialog-polyfill.

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

Artículo de referencia: demostración del elemento de diálogo

biblioteca de funciones usualmente js: https://github.com/JofunLiang/generalmentejs

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.