Hello, thanks for your purchase.
1) First add the Popup HTML just after the <div class="body">:
....
.......
<div class="body">
<!-- Popup -->
<div id="appointmentPopup" class="dialog dialog-sm zoom-anim-dialog mfp-hide">
<h3 class="font-weight-semi-bold">Dialog example</h3>
<p>This is dummy copy. It is not meant to be read. It has been placed here solely to demonstrate the look and feel of finished, typeset text. Only for show. He who searches for meaning here will be sorely disappointed.</p>
</div>
.......
.........
2) In the appointment button links you need change the href to href="#appointmentPopup" and add the class popup-with-move-anim. Example in the header top button:
<span class="header-top-button-make-as-appoitment d-inline-flex align-items-center justify-content-center h-100 p-0 align-top">
<a href="#appointmentPopup" class="popup-with-move-anim d-flex align-items-center justify-content-center h-100 w-100 btn-primary font-weight-normal text-decoration-none">MAKE AN APPOINTMENT</a>
</span>
3) Add the script examples.lightboxes.js on footer of page (as the last script included on the page):
<script src="js/examples/examples.lightboxes.js"></script>
We hope this helps!
Please try that and let us know if you need further assistance.
Kind Regards,
Rodrigo.
If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads