Как добавить модальное всплывающее окно на кнопку просмотра? - PullRequest
Новая
       81

Как добавить модальное всплывающее окно на кнопку просмотра?

0 голосов
/ 30 октября 2019 
  <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>

Код профиля профиля на моей главной странице, и я пытался добавить модальное всплывающее окно, в котором при нажатии на кнопку «Просмотр» будет показан весь профиль сотрудника. И я понятия не имею, как это сделать. Спасибо за любую помощь.

1 Ответ

1 голос
/ 30 октября 2019

Добавьте этот загрузочный CDN ( Сеть доставки контента ) на свою HTML-страницу внутри 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>

Модальный компонент - это диалоговое окно / всплывающее окно, которое отображаетсяповерх текущей страницы

В следующем примере показано, как создать базовый модал 

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

InSide modal-body Вы можете поместить свой код в любое положениепрофиль сотрудника, что вы хотите 

<!-- 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>

если вам нужна анимация Используйте класс .fade для добавления эффекта затухания при открытии и закрытии модального

Измените размер модального, добавив.modal-sm класс для маленьких модалов , .modal-lg класс для больших модалов или .modal-xl для очень больших модалов .

Центрируйте модальные по вертикали и горизонтали на странице, с помощью .modal-dialog-centered класса

Подробнее о модальной документации Нажмите здесь

Вы можете редактировать или просматривать код Здесь

...