打开华丽的弹出窗口

问题描述

我需要帮助才能使用 magnific popup 打开弹出窗口。

https://codepen.io/victoreugen2002/pen/poeoKPg

   $('#open-popup').on('click',function (e) {
    jQuery('#open-popup').magnificPopup({
        type: 'inline',midClick: true,// Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
 
    }).magnificPopup('open');

    e.preventDefault();

html 内容：

<a href="#open-popup" class="small-button">
    <div class="button-text">Open Modal ></div>
</a>
<div id="open-popup" class="mfp-hide white-popup">
    <h3>I'm a Modal</h3>
      Lorem ipsum dolor sit amet,consectetur adipiscing elit. Praesent malesuada venenatis cursus. Donec suscipit enim id nulla vestibulum interdum. Morbi tempus venenatis neque pulvinar volutpat. Ut bibendum urna eu molestie euismod. Nullam sit amet turpis tristique,maximus lectus at,venenatis ante.
    
        Phasellus faucibus euismod velit eget porta. Nullam maximus libero dolor,quis ornare nulla pharetra euismod. Fusce pretium sagittis augue,vitae faucibus odio accumsan at. Quisque maximus semper volutpat. Cras vel velit soDales,lacinia sapien ut,vulputate orci. Ut diam elit,mollis ac ultrices sit amet,ultricies et nisl.
       
</div>

解决方法

首先我要做的是将 open-popup-link 添加到您的 <a>，

然后删除 .magnificPopup('open')，这样您的代码就看起来像。

$('a[href="#open-popup"]').on('click',function(e) {
  $('#open-popup').magnificPopup({
    type: 'inline',midClick: true // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
  })
});

另请注意，您必须将 $('#open-popup').on('click' 更改为 $('a[href="#open-popup"]').on('click'

演示

$(document).ready(function() {
  initPopups();
});

function initPopups() {

  $('a[href="#open-popup"]').on('click',function(e) {
    $('#open-popup').magnificPopup({
      type: 'inline',midClick: true // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
    })
  });


}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" rel="stylesheet" />

<a href="#open-popup" class="open-popup-link small-button">
  <div class="button-text">Open Modal ></div>
</a>
<div id="open-popup" class="mfp-hide white-popup">
  <h3>I'm a Modal</h3>

  Lorem ipsum dolor sit amet,consectetur adipiscing elit. Praesent malesuada venenatis cursus. Donec suscipit enim id nulla vestibulum interdum. Morbi tempus venenatis neque pulvinar volutpat. Ut bibendum urna eu molestie euismod. Nullam sit amet turpis
  tristique,maximus lectus at,venenatis ante. Phasellus faucibus euismod velit eget porta. Nullam maximus libero dolor,quis ornare nulla pharetra euismod. Fusce pretium sagittis augue,vitae faucibus odio accumsan at. Quisque maximus semper volutpat.
  Cras vel velit sodales,lacinia sapien ut,vulputate orci. Ut diam elit,mollis ac ultrices sit amet,ultricies et nisl.

</div>