<div class="col-md-3">
          <div class="card card-profile">
            <div class="card-avatar">
              <a href="#pablo">
                <img class="img" src="{% static 'img/faces/marc.jpg' %}">
              </a>
            </div>
            <div class="card-body">
              <h5 class="card-category text-gray">CEO / Co-Founder</h5>
              <h4 class="card-title">{{user.first_name}} {{user.last_name}}</h4>
                <h6 class="card-category text-gray">ILO - 001</h6>
                <h6 class="card-category text-gray">HOME HEALTH</h6>
              <p class="card-description">
                  Monday to Friday (9AM to 6PM)
              </p>
              <a href="#" class="btn btn-primary btn-round">View</a>
            </div>
          </div>
        </div>

El código para una foto de perfil en mi página principal, y estaba tratando de agregar una ventana emergente modal en la que cuando hago clic en el botón Ver, se mostrará el perfil completo del empleado. Y no tengo ni idea de cómo hacer esto. Gracias por cualquier ayuda.

-1
Asmodeus Hellsing 30 oct. 2019 a las 06:57

1 respuesta

La mejor respuesta

Agregue este CDN bootstrap 4 ( Red de entrega de contenido ) en su página HTML dentro de la etiqueta head

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

El componente modal es un cuadro de diálogo / ventana emergente que se muestra en la parte superior de la página actual

El siguiente ejemplo muestra cómo crear un modal básico

<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Open modal
</button>

InSide modal-body puedes poner tu código lo que sea que pones en el perfil del empleado lo que quieras

<!-- The Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body..
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

Si quieres algo de animación Usa la clase .fade para agregar un efecto de desvanecimiento al abrir y cerrar el modal

Cambie el tamaño del modal agregando la clase .modal-sm para modales pequeños , la clase .modal-lg para modales grandes o .modal-xl para modales extragrandes .

Centre el modal vertical y horizontalmente dentro de la página, con la clase .modal-dialog-centered

Más información sobre la documentación modal Haga clic aquí

Puede editar o obtener una vista previa del código aquí

1
Kiran Mistry 30 oct. 2019 a las 05:12