fancybox with other events not closing on button click inside modal

Question

I've been working with fancyBox and am not having luck getting a button inside of my fancybox modal to close the modal. I'm not sure if it is because there is e.stopPropogation in the action that closes a dropdown behind it. I've also attempted taking the modal closure and what will be other modal functionality into another file... that did not help.

Other info: I want to keep the original fancybox button and allow it to close the modal. The ability to close the download dropdown is essential.. I've also attemted to put the e.stopPropagation into the Downloadables function; that shuts down all functionality of the dropdown.

Updated info: It seems that I can't access the button's href, which I've added to it, either.

Here's the js:

function Downloadables(el, options) {
  this.el = $(el)
  this.options = options

  this.el.on('click touchend', '.' + this.options.openDownloadClass, 
  this.openDropdown.bind(this))

  $(window).on('click touchend', this.closeDropdown.bind(this))

  // this.el.on('click touchend', '.' + this.options.closeFancyboxButton, 
     this.closeModal.bind(this))

}

Downloadables.prototype = {
  openDropdown: function(e) {
    e.preventDefault()
    e.stopPropagation();
    var downloadList = this.el.find('.report-download__list');
    downloadList.toggleClass('open');
},

closeDropdown: function(e) {
    var target = $(e.target);
    e.stopPropagation();
    var downloadList = this.el.find('.report-download__list');

    if (target.closest('.report-download__list').is('.report-download__list')|| target.is('.report-download__list')){
        return
    }
   downloadList.removeClass('open'); 
},

closeModal: function() {
    console.log('button clicked') //not currently registering
    // $.fancybox.close( all ); //sample code from fancybox docs
    //parent.$.fancybox.close(); //what will be used to close the modal on button click
    }
}

$.fn.downloadables = function(options) {
    options = Object.assign({}, {
    openDownloadClass: 'report-cta',
    closeFancyboxButton: 'terms-modal__accept-button',
}, options)

  return $(this).each((index, el) => new Downloadables(el, options))
}

$('.report').downloadables()

here's the html:

<!-- this is triggered with an a tag outside, in an li -->
<div class="terms-modal__container" style="display:none" id="reports-modal">
  <div class="terms-modal__textbox">
    <p class="terms-modal__text">
        stuff inside
    </p>

  <div class="terms-modal__ctas"> <!-- the buttons that don't get recognized -->
    <a class="terms-modal__accept-button close-modal">I Accept</a> <!-- click to open new tab/download and modal closes -->
    <a class="terms-modal__decline-button close-modal">I Decline</a>
  </div>       
</div>

Answer 1

I was able to figure out the problem: I was calling closeModal on this.el - the modal isn't a child of this.el, it is a child of the document, so switching to

$(document).on('click touchend', '.' + this.options.closeFancyboxButton, 
 this.closeModal.bind(this)) 

allowed the click/touch events to register and do what they were supposed to do. This also helped with setting the href of the Accept button to match the data-href of the fancybox link.