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
Page Views

This page has been viewed 195 times.

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
I believe that in order to better your knowledge base, it takes a lot of failing in order to succeed. I don't consider anything a failure as long as you get back up and you learn from your own mistakes.
Unknown