关闭按钮不会出现在放大弹出窗口中答案

【问题标题】：CLose Button doesn't appear on magnific-popup关闭按钮不会出现在放大弹出窗口中
【发布时间】：2015-09-22 11:09:30
【问题描述】：

这应该很简单......但是......

我已经尝试了几乎所有方法来让关闭 (X) 按钮出现在宏伟的弹出窗口中。但它不会发生。除了“返回”选项外，弹出页面无法逃脱。这是我得到的：

.white-popup {
position: relative;
background: #FFF;
padding: 20px;
width: auto;
max-width: 500px;
margin: 20px auto;
}

和

<div class="popup-modal"> 
                    <a href="img/paintings/full/ink-couple-tree-dancing_full.jpg"><img src="img/paintings/acrylic-trulkhor-1.png"></a>
                </div>

                <div id="test-modal" class="mfp-hide white-popup">

                <p><button class="closePopup">Close</button></p>

                </div>

                <script type="text/javascript">

                    $('.popup-modal').magnificPopup({

                    type: 'inline',
                    modal: false,

                    });

                    $(document).on('click', '.closePopup', function (e) 
                {
                    e.preventDefault();
                    $.magnificPopup.close();
                });


                </script>

            </div>

有什么想法吗？谢谢。

【问题讨论】：

你能在这里设置代码演示吗：JSfiddle？

标签： javascript html css magnific-popup

【解决方案1】：

这是一个工作示例：https://jsfiddle.net/0rd5dc3v/2/

我改变了一些东西：

// Change the html link to the popup id, not the image url    
<div class="popup-modal"> 
    <a class="popup-modal-link" href="#test-modal"><img src="img/paintings/acrylic-trulkhor-1.png"></a>
</div>

// Call magnificPopup on the <a> element, not the outer div
$('.popup-modal-link').magnificPopup({
    type: 'inline',
    // Hide the builtin close button so we can use a custom close button
    showCloseBtn: false
});

【讨论】：

【解决方案2】：

一个简单的解决方法是在您初始化 Magnific Popup 的对象中包含 closeMarkup 属性，并向该标记添加自定义类。

然后，将标记中的命名自定义类添加到 CSS 中，并将 display 设置为 'none' 以外的其他值，并标记为 !important。

在 Magnific Popus JS 中：

closeMarkup:"<button title='%title%' type='button' class='mfp-close myDisplayOverride'>&#215;</button>"

CSS：

.myDisplayOverride{
  display:block !important
}

【讨论】：

【解决方案3】：

按钮默认为白色。要使其可见，请将其 CSS 属性设置为黑色或在白色背景上可见的任何颜色。

.mfp-close {            
    color : black;          
}

【讨论】：

【解决方案4】：

派对迟到了 5 年！

我遇到了和你一样的问题：当 inline 设置为 true 时，关闭按钮不存在。

您需要添加closeBtnInside: true 配置选项才能使按钮可见。

所以在你的情况下：

$('.popup-modal').magnificPopup({
  type: 'inline',
  modal: false,
  closeBtnInside: true
});

请记住，如果您为关闭按钮设置了自定义标记，则需要添加一点 CSS 魔法以使其在点击时起作用。

我的自定义按钮标记如下所示：

closeMarkup: '<button type="button" class="mfp-close"><i class="far fa-times"></i></button>'

当您单击<i class="far"> 元素时，什么也没有发生。所以你需要添加

.mfp-close i {
  pointer-events: none;
}

因为magnificPopup 将点击处理程序绑定到按钮元素但没有绑定到它的子元素...

【讨论】：