-1

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
  • 1
    Si suministras el código de ejemplo será mas fácil que usuarios de aquí se interesen en ayudarte a solucionar el problema.
    – Eztronics
    Commented el 8 ene. 2018 a las 23:55

1 respuesta 1

1

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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.