Question

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

我已经尝试了几乎所有东西来让Close（X）按钮出现在巨大的弹出窗口中。但它并没有发生。除了Back选项之外，弹出页面无法逃脱。这就是我所拥有的：

.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>

有什么想法吗？感谢。

Answer 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
});

Answer 2

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

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

在Magnific Popus JS中：

closeMarkup:"<button title='%title%' type='button' class='mfp-close myDisplayOverride'>×</button>"

<强> CSS：

.myDisplayOverride{
  display:block !important
}

Answer 3

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

.mfp-close {            
    color : black;          
}

Answer 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的点击处理程序绑定到了按钮元素，但没有绑定到其子元素...

关闭按钮不会出现在magnific-popup上

4 个答案: