时间戳

首页 > 解决方案 > 如何为点击弹出窗口添加 Jquery 或 javascript 函数？

popup - 如何为点击弹出窗口添加 Jquery 或 javascript 函数？

问题描述

弹出图像我需要点击菜单项弹出显示

标签： popup

解决方案

您可以最初使用 CSS 隐藏弹出内容，然后使用 jQuery fadeIn()/fadeOut()分别显示/隐藏弹出内容。

示例 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();
   }
});

检查以下小提琴的工作示例：https ://jsfiddle.net/tvaunsg3/1/

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

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

推荐阅读