¿Cómo abrir un modal diferente que está dentro de una lista?

Posted on by Rudeus Greyrat

Las hojas de estilo en cascada son un lenguaje de hojas de estilo que se utiliza junto con HTML y JavaScript para crear una aplicación web. Los marcos CSS brindan una biblioteca que permite un diseño web estandarizado y más fácil. Uno de estos marcos CSS es Bootstrap 4. Bootstrap 4 es el marco CSS más utilizado debido a su simplicidad y la biblioteca incorporada que ofrece una amplia gama de componentes y utilidades necesarios para diseñar una interfaz de usuario interactiva.

La lista y los modales se encuentran entre la amplia variedad de componentes predefinidos en Bootstrap 4. Los modales se basan en la combinación de HTML, CSS y JavaScript. Los modales se colocan sobre el elemento principal que lo activó en el documento y se pueden eliminar haciendo clic en las opciones de cierre presentes en el modal. Además, al hacer clic en el fondo modal se cierra automáticamente el modal. Bootstrap 4 admite solo un modal a la vez. Este artículo se enfoca en abrir un modal diferente que está dentro de una lista. Los siguientes ejemplos demuestran la apertura de un modal desde un elemento de lista.

Primer enfoque: el primer enfoque se ocupa de los modales que contienen contenido completamente diferente. En este caso, los modales deben codificarse individualmente.

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
            integrity=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
        crossorigin="anonymous">
    <script src=
"https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity=
"sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
        crossorigin="anonymous">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" 
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
        integrity=
"sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
        crossorigin="anonymous">
    </script>
</head>
  
<body>
  
    <!-- Button trigger modal -->
    <ul>
        <li data-toggle="modal" 
            data-target="#exampleModal1" 
            data-whatever="item 1">
            <a href="#">Item 1</a>
        </li>
        <li data-toggle="modal" 
            data-target="#exampleModal2" 
            data-whatever="item 2">
            <a href="#">Item 2</a>
        </li>
        <li data-toggle="modal" 
            data-target="#exampleModal3" 
            data-whatever="item 3">
            <a href="#">Item 3</a>
        </li>
    </ul>
    <!-- Modal -->
    <div class="modal fade" id="exampleModal1" 
        tabindex="-1" role="dialog" 
        aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" 
                        id="exampleModalLabel">
                        Modal title
                    </h5>
                    <button type="button" class="close" 
                        data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>
                        Python is a high-level, general-purpose 
                        and a very popular programming language..
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class=
                        "btn btn-secondary" data-dismiss="modal">
                        Close
                    </button>
                </div>
            </div>
        </div>
    </div>
  
    <div class="modal fade" id="exampleModal2" 
        tabindex="-1" role="dialog" 
        aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" 
                        id="exampleModalLabel">
                        Modal title</h5>
                    <button type="button" class="close" 
                        data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>
                        This specially designed Python 
                        tutorial will help you learn 
                        Python Programming Language.
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" 
                        class="btn btn-secondary" 
                        data-dismiss="modal">
                        Close
                    </button>
                </div>
            </div>
        </div>
    </div>
  
    <div class="modal fade" id="exampleModal3" 
        tabindex="-1" role="dialog" 
        aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" 
                        id="exampleModalLabel">
                        Modal title
                    </h5>
                    <button type="button" class="close" 
                        data-dismiss="modal" 
                        aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>
                        Learning applications, along with 
                        all cutting edge technology in 
                        Software Industry.
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" 
                        class="btn btn-secondary" 
                        data-dismiss="modal">
                        Close
                    </button>
                </div>
            </div>
        </div>
    </div>
</body>
  
</html>

Producción

  • El siguiente resultado se muestra al hacer clic en «elemento1»

  • El siguiente resultado se muestra al hacer clic en «elemento2»

  • El siguiente resultado se muestra al hacer clic en «item3»

Segundo enfoque: el segundo enfoque se ocupa de los modales que tienen un contenido casi similar con diferencias muy leves. Se escribe una función de JavaScript para cambiar el texto según el requisito. El evento show.bs.modal se activa inmediatamente cuando se llama al método de instancia show del elemento de la lista. El elemento en el que se hizo clic está disponible como la propiedad de destino relacionada del evento. El elemento de destino se almacena en la variable ‘li’. A continuación, los datos, sea cual sea el valor del elemento de destino, se almacenan en la variable del destinatario. El evento modal actual se almacena en la variable modal. Esta variable modal invoca el método find() para encontrar el «título» modal y el «cuerpo» modal y reemplazarlo con el texto requerido.

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" 
        crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
        integrity=
"sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 
        crossorigin="anonymous">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" 
        crossorigin="anonymous">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
        integrity=
"sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
        crossorigin="anonymous">
    </script>
</head>
  
<body>
  
    <!-- Button trigger modal -->
    <ul>
        <li data-toggle="modal" 
            data-target="#exampleModal" 
            data-whatever="item 1">
            <a href="#">Item 1</a>
        </li>
        <li data-toggle="modal" 
            data-target="#exampleModal" 
            data-whatever="item 2">
            <a href="#">Item 2</a>
        </li>
        <li data-toggle="modal" 
            data-target="#exampleModal" 
            data-whatever="item 3">
            <a href="#">Item 3</a>
        </li>
    </ul>
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" 
        tabindex="-1" role="dialog" 
        aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" 
                        id="exampleModalLabel">
                        Modal title
                    </h5>
                    <button type="button" class="close" 
                        data-dismiss="modal" 
                        aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p> hi</p>
                </div>
                <div class="modal-footer">
                    <button type="button" 
                        class="btn btn-secondary" 
                        data-dismiss="modal">
                        Close
                    </button>
                </div>
            </div>
        </div>
    </div>
    <script>
        $('#exampleModal').on('show.bs.modal', 
        function (event) {
  
            // Button that triggered the modal
            var li = $(event.relatedTarget)
  
            // Extract info from data attributes 
            var recipient = li.data('whatever')
              
            // Updating the modal content using 
            // jQuery query selectors
            var modal = $(this)
  
            modal.find('.modal-title')
                .text('New message to ' + recipient)
                  
            modal.find('.modal-body p')
                .text('Welcome to ' + recipient)
        })
    </script>
</body>
  
</html>

Producción

Publicación traducida automáticamente

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *