fancybox modal popup example

HTML

<button id='open_popup' class='btn btn-primary'>Open Popup</button>
<div style="display: none; max-width:700px;" id="pop-up" >
<div>
    <h2>My Content</h2>
    <p>some content</p>
    <center><button data-fancybox-close class="button">Close</button></center>
</div>
</div>

Scripts

<link rel="stylesheet" type="text/css" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.js"></script>

Javascript

$(document).ready(function() {
    if ($('#open_popup').length) {
      $( "#open_popup" ).click(function() {
        $.fancybox.open({
  				src  : '#pop-up',
  				type : 'inline',
  				modal: true,
  				smallBtn : true,
  			});
      });
    }
});