What is the cause of error with fancyBox?

Question

JavaScript

When several identical links are located on the page, the popup opening with inline content stops working correctly: it appears for a second and disappears, moreover, a darkened background remains. If there is only one link, then everything is ok.
Link:

<a data-fancybox="forms" data-src="#order-popup" href="javascript:;"></a>

Initialization:

$('[data-fancybox="forms"]').fancybox({
        infobar: false,
        touch: {
            vertical: false, 
            momentum: false
        }
    });

Hidden block:

<div class="order-popup hide" id="order-popup">
Содержимое
</div>

When several links are located in the address bar, it is no longer site.ru/#forms, but site.ru/#forms-1 site.ru/#forms-2 , etc.

Answer 1

try it like this

$('[data-fancybox="forms"]').each(function(){
  $(this).fancybox(...)
})

If the links require different galleries, then do not forget to indicate them.

data-fancybox="forms-1"
data-fancybox="forms-2"