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的子项，它是文档的子项，所以切换到

{{1}}

允许点击/触摸事件进行注册并执行他们应该执行的操作。这也有助于设置Accept按钮的href以匹配fancybox链接的data-href。

fancybox与其他事件没有关闭按钮单击模态内部

1 个答案: