Use el complemento modal JavaScript de Resim para agregar cuadros de diálogo a su sitio para cajas de luz, notificaciones de usuario o contenido completamente personalizado.
Un modal que aparacerá del centro y escalará ,y se encogerá hacia el centro.
<button class="btn btn--flat ripple text-primary" data-toggle="modal" data-target="#demo">
Demo del modal
</button>
<div class="modal" id="demo" tabindex="-1">
<div class="modal--dialog" style="max-width: 400px;">
<div class="container expanded">
<div class="row p-2">
<div class="col-sm-12 flex jc--between">
<h4 class="text-md as--center">Título modal</h4>
<button class="btn--icon btn--close ripple" data-dismiss="modal"></button>
</div>
<div class="col-sm-12">
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
</p>
</div>
<div class="col-sm-12 flex jc--end mt-2">
<button class="btn btn--flat ripple p-2 mr-4 text-primary" data-dismiss="modal">Cancel</button>
<button class="btn btn--flat ripple p-2 text-primary" data-dismiss="modal">Yes</button>
</div>
</div>
</div>
</div>
</div>
Un modal que no se puede cerrar tocando fuera de la clase .modal--dialog. Tampoco se puede cerrar con la tecla "ESC".
<button class="btn btn--flat ripple text-primary" data-toggle="modal" data-target="#static">
Modal Estático
</button>
<div class="modal" id="static" tabindex="-1" data-backdrop="static">
<div class="modal--dialog" style="max-width: 290px;">
<div class="container expanded">
<div class="row p-2">
<div class="col-sm-12 flex jc--between">
<h4 class="text-md as--center">Use Google's location service?</h4>
<button class="btn--icon btn--close" data-dismiss="modal"></button>
</div>
<div class="col-sm-12">
<p> Let Google help apps determine location. This means sending anonymous location data to Google,
even when no apps are running. </p>
</div>
<div class="col-sm-12 flex jc--end mt-2">
<button class="btn btn--flat ripple p-2 mr-4" data-dismiss="modal">Cancel</button>
<button class="btn btn--flat ripple p-2">Yes</button>
</div>
</div>
</div>
</div>
</div>
Un modal con un formulario con [data-backdrop="static"]
<button class="btn btn--flat ripple text-primary" data-toggle="modal" data-target="#modal_form">
Modal con form
</button>
<div class="modal" data-backdrop="static" tabindex="-1" id="modal_form">
<div class="modal--dialog" style="max-width: 500px;">
<div class="container expanded">
<div class="row p-2">
<div class="col-sm-12 flex jc--between">
<h5 class="text-md as--center">Form</h5>
<button class="btn--icon btn--close" data-dismiss="modal"></button>
</div>
</div>
<div class="row p-2">
<div class="col-sm-12">
<form action="">
<div class="form__field flex--column">
<label for="name" class="form__label">Nombre</label>
<input type="text" class="form__control" id="name">
</div>
<div class="form__field flex--column">
<label for="email" class="form__label">Correo Electronico</label>
<input type="email" class="form__control" id="email">
</div>
<div class="form__field flex--column">
<label for="password" class="form__label">Password</label>
<input type="password" class="form__control" id="password">
</div>
<div class="form__field flex--column">
<button class="btn btn--flat text-primary ripple">Guardar</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
El color del fondo de los modales tambien pueden ser personalizadas,dependiendo de los colores que tengas en la varible "$colors" de SASS
$colors:(
primary: #1867c0,
secondary:#51cf8e,
third: #f56431d9,
success: #28a745,
dark : #343a40,
danger: #dc3545,
warning: #ffc107,
info : #17a2b8,
gray: #545b62,
);
Por ejemplo con el color dark.Se usa la clase bg--$clave,que sirve para el color de fondo,donde $clave es la clave del color que vas usar para el fondo.Lo puedes usar para el "modal--dialog"
<button class="btn btn--flat ripple text-primary" data-toggle="modal" data-target="#modal_custom">
Modal personalizado
</button>
<div class="modal" id="modal_custom" tabindex="-1">
<div class="modal--dialog bg--dark" style="max-width: 400px;">
<div class="container expanded">
<div class="row p-2">
<div class="col-sm-12 flex jc--between">
<h4 class="text-md as--center">Modal personalizado</h4>
<button class="btn--icon btn--close ripple" data-dismiss="modal"></button>
</div>
<div class="col-sm-12">
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas
eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
</p>
</div>
<div class="col-sm-12 flex jc--end mt-2">
<button class="btn btn--flat ripple p-2 mr-4" data-dismiss="modal">Cancel</button>
<button class="btn btn--flat ripple p-2" data-dismiss="modal">Yes</button>
</div>
</div>
</div>
</div>
</div>