Ventana modal móvil amigable en CSS puro-modal_box

Vista prévia

Descripción

Solo otra biblioteca de CSS que facilita la creación de ventanas modales para equipos de escritorio y dispositivos móviles.

Funcionamiento

Descargue e inserte la hoja de estilos ' modal-Box. min. css ' en el encabezado de la página HTML.

<link href="css/modal-box.min.css" rel="stylesheet">

Cree la ventana modal con el contenido personalizado y los botones de acción de la siguiente:

<div aria-hidden="true" role="dialog" class="modal-dialog dialog" id="open-modal">


<div class="modal">



<a href="#close" title="Close" class="close">×</a>



<div class="header-modal no__select">



<h1><strong>↤</strong> Parameters</h1> <span><strong class="mob-hide">Action:</strong> <a href="#open-modal" title="Validate changes"><svg class="svg-icon" viewBox="0 0 20 20">✔<path d="M7.6 14.6c0.1 0.1 0.3 0.2 0.5 0.2 0.2 0 0.3-0.1 0.5-0.2l8.2-8.2c0.3-0.3 0.3-0.7 0-0.9 -0.3-0.3-0.7-0.3-0.9 0l-7.8 7.8L4.2 9.3c-0.3-0.3-0.7-0.3-0.9 0 -0.3 0.3-0.3 0.7 0 0.9L7.6 14.6z"></path></svg></a></span>


</div>



<div class="inner-dialog">




<h2>Modal Box</h2>



</div> <!-- /inner-dialog -->



<div class="footer-modal no__select">



<a href="#" class="">Help</a> <a href="#close" class="help">Close</a>


</div>

</div> <!-- /modal -->

 </div>

Es posible que necesite un botón de desencadenador para alternar la ventana modal.

<a href="#open-modal" class="button" id="b-active">Open Modal</a>

Registro de cambios

04/16/2018

• Actualizado