fancybox modal popup example

an example showing fancybox text modal window attached to a button to open it

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,
  			});
      });
    }
});

Other Items in javascript
Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

❤👩‍💻🕹

Random Quote
Most people can do absolutely awe-inspiring things,” he said. “Sometimes they just need a little nudge.
Unknown