<h2>fancybox v3.5</h2>
example from <a href="https://l2banners.ru">l2banners.ru</a>
<hr class="my-5" />

<p>
  <a data-fancybox data-touch="false" href="#modal" class="btn btn-primary">Open form</a>
</p>

<div id="modal">
  <div>
   <form action="" class="form">
     <input type="text">
     <br><br>
     <input type="text">
     <br><br>
     <input type="text">
    </form>
  </div>
</div>

#modal {
  display: none;
  width: 100%;
  max-width: 600px;
}

#modal > div {
  max-height: calc(100vh - 100px);
  overflow: auto;
}

$("[data-fancybox]").fancybox({
    beforeShow: function( instance, slide ) {
      $(slide.src).find('input').val('');
    }
});