如何在视图按钮上添加模式弹出窗口？

Question

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

主页上个人资料图片的代码，我试图向其中添加模式弹出窗口，当我单击“查看”按钮时，它将显示员工的整个个人资料。而且我不知道如何执行此操作。感谢您的帮助。

Answer 1

将此引导程序4 CDN（

内容交付网络）添加到head标记内的HTML页面中

<!-- 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类在页面中垂直和水平放置模态居中阅读有关模态文档的更多信息Click Here

您可以编辑或预览代码Here