Edit in JSFiddle

$(document).ready(function() {
 //Adds a lightbox to every phone number link with the CSS class callbutton
  $(".callbutton").click(function() {
  //We change the hidden Iframe withe the new URL with link's phone number
    document.getElementById("ifrm").src = 'https://app.toky.co/business/dialer#?call=' + this.text;
    //Display the fancybox with the dialer displaying the clicked phone number
    $.fancybox.open({
      src: '#ifrm',
      type: 'inline',
      opts: {
        afterShow: function(instance, current) {
          console.info('done!');
        },
        hideScrollbar: true
      }
    });


  });


});

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/lux/bootstrap.min.css" rel="stylesheet" integrity="sha384-hVpXlpdRmJ+uXGwD5W6HZMnR9ENcKVRn855pPbuI/mwPIEKAuKgTKgGksVGmlAvt" crossorigin="anonymous">
<script src="//code.jquery.com/jquery-3.4.0.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js"></script>


<!------ Include the above in your HEAD tag ---------->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <a class="navbar-brand" href="#">Custom CRM</a>
  </nav>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="col-sm-3 col-md-3 well">
        <ul class="nav flex-column mr-auto">
          <li class="nav-item">
            <a class="nav-link active " href="#">Customers</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Leads</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Companies</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Settings</a>
          </li>
        </ul>
      </div>
      <div class="col-sm-9 col-md-9">
        <div class="row">
          <div class="btn-group" role="group" aria-label="Basic example">
            <button type="button" class="btn btn-primary">Add</button>
            <button type="button" class="btn btn-secondary">Edit</button>
            <button type="button" class="btn btn-danger">Delete</button>
          </div>
        </div>
        <table class="table table-hover">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">First</th>
              <th scope="col">Last</th>
              <th scope="col">Phone</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">1</th>
              <td>Mark</td>
              <td>Otto</td>
              <td><a href="#" class="callbutton">+1 844 332 6433</a></td>
            </tr>
            <tr>
              <th scope="row">2</th>
              <td>Jacob</td>
              <td>Thornton</td>
              <td><a href="#" class="callbutton">+52 55 8525 0122</a></td>
            </tr>
            <tr>
              <th scope="row">3</th>
              <td>Larry</td>
              <td>the Bird</td>
              <td><a href="#" class="callbutton">+55 11 4949 6366</a></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
<iframe style="display: none;overflow:hidden;width:100%;height:100%" id="ifrm" allow="microphone" src="" frameborder="0" scrolling="no">
</iframe>
<!--
<link href="//cdn.rawgit.com/noelboss/featherlight/1.7.13/release/featherlight.min.css" type="text/css"
  rel="stylesheet" />
<script src="//cdn.rawgit.com/noelboss/featherlight/1.7.13/release/featherlight.min.js" type="text/javascript"
  charset="utf-8"></script>
  
-->

.btn,
.navbar-brand,
th,
body {
font-size: 1.5rem!important;
}

.fancybox-content {
  width: 300px;
  height: 540px;
  margin: 0;
  padding: 10px !important;
  overflow: hidden !important;
}