Estoy usando Materialize y quisiera que encima del slide fullscreen poner un botón que abre un modal y dentro de éste colocar un formulario de registro de información o llenado de datos para luego poder cerrarlo mientras las pantallas del slide en el fondo no dejan de fluir.
1 respuesta
Sería mucho mejor con un código que tengas. Lo poco que logro entender es que el modal se sobre ponga a todo, hasta el slide fullscreen.
Se puede sobreponer con la propiedad z-index de css.
Mientrás más grande sea el valor de z-index más al frente estará de la pantalla. Inclusive soporta valores negativos.
$(document).ready(function(){
$('.modal').modal();
$('.carousel').carousel();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<!-- Modal Lanzador -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<!-- Modal Estrucutura -->
<div id="modal1" class="modal" style="z-index: 10;">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
</div>
</div>
<div class="carousel">
<a class="carousel-item" href="#one!"><img src="https://lorempixel.com/250/250/nature/1"></a>
<a class="carousel-item" href="#two!"><img src="https://lorempixel.com/250/250/nature/2"></a>
<a class="carousel-item" href="#three!"><img src="https://lorempixel.com/250/250/nature/3"></a>
<a class="carousel-item" href="#four!"><img src="https://lorempixel.com/250/250/nature/4"></a>
<a class="carousel-item" href="#five!"><img src="https://lorempixel.com/250/250/nature/5"></a>
</div>