These modular elements can be readily used and customized in every layout across pages.

For detail documentation. View Modal on Bootstrap

<button class="btn btn-dark" type="button" data-bs-toggle="modal" data-bs-target="#exampleModal">Launch demo modal</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content rounded-0">
      <div class="modal-header border-0"><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button></div>
      <div class="modal-body text-center p-5">
        <h4>Modal done right</h4>
        <p class="font-sans-serif fw-light">No matter the task, the new slick is up to it — and even more. See for your self — the pre-made pages, inspired by world's finest websites, are all made with slick. And this is only a tip of the iceberg of what you can do with slick.</p><button class="btn btn-primary btn-sm" type="button" data-bs-dismiss="modal">AWESOME</button><button class="btn btn-outline-danger btn-sm" type="button" data-bs-dismiss="modal">cancel</button>