打开放大弹出窗口

Question

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

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>

Answer 1

首先我要做的是将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>