如何添加Jquery或javascript点击弹窗功能？

Question

popup images I need to click to menu items popup show

Answer 1

您可以先使用 CSS 隐藏弹出内容，然后分别使用 jQuery fadeIn()/ fadeOut() 到 show/hide 弹出内容。

样本HTML：

<a href="#" class="click-to-open">click to open popup</a>

<div class="popup-content"> <!-- use display:none to hide initially -->
  <a href="#" class="popup-close">x</a>
  <h1>Lorem Ipsum</h1>
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  </p> 
</div>

jQuery点击功能：

jQuery(document).ready(function($){
  $('.click-to-open').on('click', function(e){
    e.preventDefault();
    $('.popup-content').fadeIn();
  });
  $('.popup-close').on('click', function(e){
    e.preventDefault();
    $('.popup-content').fadeOut();
   }
});

检查以下 fiddle 工作示例：https://jsfiddle.net/tvaunsg3/1/

您可以在 body 上使用 toggleClass() 在弹出窗口处于活动状态时创建一些叠加层。

或者，如果您需要更高级的功能（回调等），您也可以使用 jQuery Modal or Magnific Popup。

如何添加Jquery或javascript点击弹窗功能？

How to add Jquery or javascript functions for click to popup open?

popup