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

【问题标题】：How to add a modal pop up on the view button?如何在视图按钮上添加模式弹出窗口？
【发布时间】：2019-10-30 03:57:54
【问题描述】：

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

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

【问题讨论】：

您阅读过此文档吗？ Bootstrap Modals

标签： html twitter-bootstrap bootstrap-modal

【解决方案1】：

将此 bootstrap 4 CDN (Content Delivery Network) 添加到您的 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>

Modal 组件是显示在当前页面顶部的对话框/弹出窗口

以下示例展示了如何创建基本模式

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

【讨论】：