Materializar modales CSS – Barcelona Geeks

Materialise CSS utiliza un componente modal para crear cuadros de diálogo, mensajes de confirmación o presentar contenido importante a los espectadores donde el contenido subyacente se vuelve inactivo hasta que se cierra la ventana modal.

Para que el modal funcione, agregue el Id. modal al enlace del activador e incluya la referencia materialize.min.js junto con jQuery en la página web. Para agregar un botón de «cerrar», agregue la clase modal-close a su botón.

Tipos de modales:

Modal básico: el modal básico consta de contenido y pie de página . La clase de contenido modal se refiere al div «principal» y la clase de pie de página modal en otra etiqueta «div» donde se usa el botón «acción».

Ejemplo:

HTML

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
  
    <link href=
"https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script type="text/javascript" src=
        "https://code.jquery.com/jquery-2.1.1.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js">
    </script>
</head>
  
<body class="container ">
    <div class="card-panel center">
        <h3>Geeks for Geeks</h3>
        <!-- Modal Trigger -->
        <a class="waves-effect waves-light btn 
            green darken-1 modal-trigger" 
            href="#demo-modal">
            Click Here!
        </a>
  
        <!-- Modal Structure -->
        <div id="demo-modal" class="modal">
            <div class="modal-content">
                <h4>Demo of Simple Modal</h4>
                <p>
                <div class="red-text">
                    Content of the modal goes here. <br>
                    Type information here. <br>
                </div>
                C is a procedural programming language.
                It was initially developed by Dennis 
                Ritchie as a system programming language 
                to write operating system. The main 
                features of C language include low-level
                access to memory, simple set of keywords,
                and clean style, these features make C 
                language suitable for system programming 
                like operating system or compiler development.
                </p>
            </div>
  
            <div class="modal-footer">
                <a href="#!" class="modal-action 
                    modal-close waves-effect waves-green 
                    btn green lighten-1">
                    Close
                </a>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            $('.modal').modal();
        }
        )
    </script>
</body>
  
</html>

Producción:

Modal con pie de página fijo: si el contenido es grande, se utiliza este tipo de modal. En este podemos crear botones de “acción” que son fijos. Para ello, se utiliza la clase modal-fixed-footer junto con la clase modal en el elemento contenedor principal.

Ejemplo:

HTML

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
  
    <link href=
"https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script type="text/javascript" src=
        "https://code.jquery.com/jquery-2.1.1.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js">
    </script>
</head>
  
<body>
    <div class="container center">
        <div class="card-panel">
            <h3>Geeks for Geeks</h3>
            <!-- Modal Trigger -->
            <a class="waves-effect waves-light btn 
                green darken-1 modal-trigger" 
                href="#demo-modal-fixed-footer">
                Click Here!
            </a>
  
            <!-- Modal Structure -->
            <div id="demo-modal-fixed-footer" 
                class="modal modal-fixed-footer">
                <div class="modal-content">
                    <h4>Modal with Fixed Footer</h4>
                    <div class="red-text">
                        Content of the modal goes here. <br>
                        Type information here. <br>
                    </div>
                    <p class="center">
                        An array is a collection of items 
                        stored at contiguous memory locations.<br>
                        The idea is to store multiple items of 
                        the same type together.<br> This makes 
                        it easier to calculate the position<br>
                        of each element by simply adding an 
                        offset to a base value,<br> i.e., the 
                        memory location of the first element of
                        the array <br>(generally denoted by the 
                        name of the array).<br>
                    </p>
  
                    <p class="center">
                        An array is a collection of items stored 
                        at contiguous memory locations.<br>
                        The idea is to store multiple items of 
                        the same type together.<br>
                        This makes it easier to calculate the 
                        position of each element <br>
                        by simply adding an offset to a base 
                        value, i.e., the memory location of <br>
                        the first element of the array (generally 
                        denoted by the name of the array).<br>
                    </p>
                </div>
                <div class="modal-footer">
                    <a href="#!" class="modal-action 
                        modal-close btn green darken-1">
                        Agree
                    </a>
                    <a href="#!" class="modal-action 
                        modal-close btn red darken-1">
                        Disagree
                    </a>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            $('.modal').modal();
        })
    </script>
</body>
  
</html>                   

Producción:

Modal de hoja inferior: los modales se pueden mostrar en la parte inferior de la pantalla del usuario y no en el medio. Es como el modal normal que se puede cerrar haciendo clic en cualquier parte de la pantalla y usando el botón dentro de ese modal. Para esto, se usa la clase bottom-sheet junto con la clase modal en el contenedor <div>.

Ejemplo:

HTML

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
  
    <link href=
"https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script type="text/javascript" 
        src="https://code.jquery.com/jquery-2.1.1.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js">
    </script>
</head>
  
<body class="container ">
    <div class="card-panel center">
        <h3>Geeks for Geeks</h3>
        <!-- Modal Trigger -->
        <a class="waves-effect waves-light 
            btn green darken-1 modal-trigger" 
            href="#demo-modal">
            Click Here!
        </a>
        <!-- Modal Structure -->
        <div id="demo-modal" class="modal bottom-sheet">
            <div class="modal-content">
                <h4>Demo of Bottom sheet Modal</h4>
                <p>
                <div class="red-text">
                    Content of the modal goes here. <br>
                    Type information here. <br>
                </div>
                An array is a collection of items stored at
                contiguous memory locations.
                The idea is to store multiple items of the
                same type together.
                </p>
            </div>
            <div class="modal-footer">
                <a href="#!" class=" modal-action 
                    modal-close waves-effect
                    waves-green btn red">
                    Close
                </a>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            $('.modal').modal();
        })
    </script>
</body>
  
</html>        

Producción:

Publicación traducida automáticamente

Artículo escrito por tanvi_gupta y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

HTML

HTML

Deja una respuesta Cancelar la respuesta