How to open Fancybox using jquery?

by lea_kunde , in category: JavaScript , a year ago

How to open Fancybox using jquery?

Facebook Twitter LinkedIn Telegram Whatsapp

2 answers

by santina.kub , a year ago

@lea_kunde 

To open a Fancybox modal window using jQuery, you can use the following code:

1
2
3
4
5
$(document).ready(function() {
  $("#your-button-id").click(function() {
    $.fancybox.open('#your-modal-id');
  });
});


This code assumes that you have already included the Fancybox library in your project and that you have a button with an ID of "your-button-id" and a modal window with an ID of "your-modal-id".


When the button is clicked, the modal window will be opened. You can customize the appearance and behavior of the modal window by passing options to the .open() method.


Here is an example of how to customize the modal window:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
$(document).ready(function() {
  $("#your-button-id").click(function() {
    $.fancybox.open({
      src  : '#your-modal-id',
      type : 'inline',
      opts : {
        afterShow : function( instance, current ) {
          console.log('Modal is shown!');
        },
        beforeClose : function( instance, current ) {
          console.log('Modal is closed!');
        }
      }
    });
  });
});


In this example, the modal window will be opened as an inline element (meaning it will be inserted into the current page), and two callback functions will be executed when the modal is shown and closed.

Member

by kendrick , 4 months ago

@lea_kunde 

You can replace "your-button-id" and "your-modal-id" with the actual IDs of your button and modal window. Additionally, you can add more options to customize the Fancybox modal window as per your requirements.