How to add a modal pop up on the view button? - html

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>
View
</div>
</div>
</div>
The code for an Profile Pic on my main page, and I was trying to add a modal pop to wherein when I click the View button it will show the whole profile of the employee. And i don't have an idea how to do this. Thanks for any help.

Answer 1

Add this bootstrap 4 CDN (Content Delivery Network) into your HTML page inside head tag
<!-- 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>
The Modal component is a dialog box/popup window that is displayed on top of the current page
The following example shows how to create a basic 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 you can put your code whatever either you put employee profile whatever you want
<!-- 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">×</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>
if you want some animation Use the .fade class to add a fading effect when opening and closing the modal
Change the size of the modal by adding the .modal-sm class for small modals, .modal-lg class for large modals, or .modal-xl for extra large modals.
Center the modal vertically and horizontally within the page, with the .modal-dialog-centered class
Read More about modal documentation Click Here
You can edit or preview code Here