Complemento modal de JavaScript (bootstrap) con ejemplo

Posted on by Rudeus Greyrat

Puede usar el complemento Javascript Modal de Bootstrap para crear notificaciones de usuario, cajas de luz o cuadros de contenido personalizados.
Ejemplo:

<html>
<head> 
<title>Modal example</title> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" 
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<script 
src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script 
src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" 
integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
</head> 
<body> 
    <!-- Modal Trigger Button -->
    <button type="button" class="btn btn-success" data-toggle="modal"
data-target="#practiseModal">
        OPEN PRACTISE MODAL
    </button>  
    <!-- Modal Body -->
    <div class="modal fade" id="practiseModal" tabindex="-1" role="dialog" 
aria-labelledby="practiseModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
            <h5 class="modal-title" id="practiseModalLabel">
              Title of the Modal</h5>
            <button type="button" class="close" 
                 data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span>
            </button>
            </div>
            <div class="modal-body">
            Content of the Modal
            </div>
            <div class="modal-footer">
            <button type="button" class="btn btn-danger" 
               data-dismiss="modal">Close</button>
            </div>
        </div>
        </div>
    </div>
</body>
</html>

Producción:

Desplazamiento de contenido con más longitud que la ventana gráfica:
cuando el contenido en el modal es más que la ventana gráfica del usuario, los modales se vuelven desplazables y se desplazan independientemente del de la página. El código fuente sigue siendo el mismo que el anterior.
Producción:

Modal centrado verticalmente:
para centrar verticalmente un modal, debe agregar una clase ‘modal-dialog-centered’ al div que tiene la clase ‘modal-dialog’.

<!DOCTYPE html> 
<head> 
<title>Modal example</title> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" 
href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" 
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" 
integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
</head> 
<body> 
    <!-- Modal Trigger Button -->
    <button type="button" class="btn btn-success" data-toggle="modal" 
      data-target="#practiseLongModal">
        OPEN CENTERED MODAL
    </button>  
    <!-- Modal Body -->
    <div class="modal fade" id="practiseLongModal" 
    tabindex="-1" role="dialog" aria-labelledby="practiseLongModalLabel" 
       aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
            <h5 class="modal-title" id="practiseLongModalLabel">
               Title of the Modal</h5>
            <button type="button" class="close" data-dismiss="modal" 
                 aria-label="Close">
                <span aria-hidden="true">×</span>
            </button>
            </div>
            <div class="modal-body">
            Content of the Modal
            </div>
            <div class="modal-footer">
            <button type="button" class="btn btn-danger" 
              data-dismiss="modal">Close</button>
            </div>
        </div>
        </div>
    </div>
</body>
</html> 

Producción :

Modales de diferentes tamaños:
puede usar diferentes tamaños para sus modales. Agregue una de las siguientes clases al div que tiene la clase ‘modal-dialog’. A continuación se muestra una tabla que describe los diferentes tamaños proporcionados por Bootstrap. También puede usar tamaños personalizados usando JS o CSS.

Tamaño Clase Ancho (px)
Pequeña .modal-sm 300
Defecto Ninguna 500
Largo .modal-lg 800
Extra grande .modal-xl 1140

Código fuente:

<!DOCTYPE html> 
<head> 
<title>Modal example</title> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" 
href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" 
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<script 
src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script 
src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" 
integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
</head> 
<body>
  
    <!-- Small Modal -->
    <button type="button" class="btn btn-primary" data-toggle="modal" 
data-target=".smallExampleModal">SMALL MODAL</button>
  
    <div class="modal fade smallExampleModal" tabindex="-1" role="dialog" 
aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Small Modal</h3>
            </div>
        </div>
    </div>
    </div>
  
    <!-- Large Modal -->
    <button type="button" class="btn btn-primary" data-toggle="modal" 
data-target=".largeExampleModal">LARGE MODAL</button>
  
    <div class="modal fade largeExampleModal" tabindex="-1" role="dialog" 
aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Large Modal</h3>
            </div>
        </div>
    </div>
    </div>
  
    <!-- Extra Large Modal -->
    <button type="button" class="btn btn-primary" data-toggle="modal" 
data-target=".extraLargeExampleModal">EXTRA LARGE MODAL</button>
    <div class="modal fade extraLargeExampleModal" 
    tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" 
aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Extra Large Modal</h3>
            </div>
        </div>
    </div>
    </div>    
</body>
</html> 

Producción :

Publicación traducida automáticamente

Artículo escrito por rossoskull 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 *