带有其他事件的 fancybox 在模态内单击按钮时未关闭

Question

我一直在使用 fancyBox，但我没有运气在我的 fancybox 模态框内找到一个按钮来关闭模态框。我不确定是不是因为在关闭它后面的下拉菜单的操作中有 e.stopPropogation。我还尝试将模态闭包和其他模态功能放入另一个文件中……但没有帮助。

其他信息：我想保留原始的 fancybox 按钮并允许它关闭模式。关闭下载下拉菜单的能力是必不可少的。我还尝试将 e.stopPropagation 放入 Downloadables 函数中；关闭下拉菜单的所有功能。

更新信息：我似乎也无法访问我已添加到其中的按钮的 href。

这是 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()

这是 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

我能够找出问题所在：我在 this.el 上调用 closeModal - 模态不是 this.el 的子项，它是文档的子项，因此切换到

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

允许 click/touch 事件注册并执行它们应该执行的操作。这也有助于设置接受按钮的 href 以匹配 fancybox link 的数据 href。

带有其他事件的 fancybox 在模态内单击按钮时未关闭

fancybox with other events not closing on button click inside modal

jquery

fancybox