¿Cómo crear un componente Modal básico en Bootstrap?

Los modales son ventanas emergentes de JavaScript que nos ayudan a ofrecer contenido muy útil en el sitio web, como mostrar la confirmación de guardar, eliminar, descargar o cerrar en el sitio web. Los modales Bootstrap son componentes de JavaScript livianos y multipropósito. También son componentes personalizables y receptivos. En este artículo, aprenderemos cómo crear un componente modal básico utilizando el marco de trabajo de arranque.

Para eso primero, tenemos que importar el siguiente CDN de arranque en nuestro archivo HTML.

<!– Bootstrap CSS –>
<enlace href=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css” rel=”stylesheet” integridad=”sha384- F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU” crossorigin=”anónimo”>

<!– Bootstrap JS –>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js” integridad=”sha384-/bQdsTh/ da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ” crossorigin=”anónimo”></script>

Ejemplo: En este ejemplo, veremos cómo crear un modal básico utilizando el componente modal Bootstrap.

HTML

<!doctype html>
<html lang="en">
  
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
  
    <!-- Bootstrap CSS -->
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
        rel="stylesheet" integrity=
"sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
        crossorigin="anonymous">
  
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
        integrity=
"sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
        crossorigin="anonymous">
    </script>
</head>
  
<body>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" 
        data-bs-toggle="modal" 
        data-bs-target="#exampleModal"
        style="margin: 2em;">
        Demo Modal
    </button>
  
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" 
        tabindex="-1" aria-labelledby="exampleModalLabel" 
        aria-hidden="true">
          
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" 
                        id="exampleModalLabel">
                        This is sample title.
                    </h5>
                    <button type="button" class="btn-close" 
                        data-bs-dismiss="modal" 
                        aria-label="Close">
                    </button>
                </div>
  
                <div class="modal-body">
                    This is the body of the modal.
                </div>
                <div class="modal-footer">
                    <button type="button" 
                        class="btn btn-secondary" 
                        data-bs-dismiss="modal">
                        Close
                    </button>
  
                    <button type="button" 
                        class="btn btn-primary">
                        Save
                    </button>
                </div>
            </div>
        </div>
    </div>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

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

HTML

Deja una respuesta Cancelar la respuesta