安装Popper.js实现高效弹出内容管理实例代码
前言
Popper.js 是一个轻量级的 JavaScript 库，用于创建动态工具提示、下拉菜单和复杂的交互式导航栏。
它能够确保这些元素根据其触发元素的位置准确显示，并且能自动适应屏幕大小的变化。
本文将介绍如何通过 CDN 和 npm 安装 Popper.js，并提供一些实现代码，展示如何使用 Popper.js 创建不同类型的弹出框。
github：https://github.com/floating-ui/floating-ui
安装 Popper.js
1. 通过 CDN 安装
使用 CDN 快速引入 Popper.js。只需在 HTML 文件的 <head> 或 <body> 部分添加以下代码：
<script src="https://unpkg.com/@popperjs/core@^2.0.0"></script>
通过 npm 安装
使用 npm 安装：
npm install @popperjs/core
导入 Popper.js：
import { createPopper } from '@popperjs/core';
实例代码
1. 基本工具提示
以下是工具提示示例。当用户将鼠标悬停在按钮上时，工具提示将显示在按钮的上方。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Popper.js 示例 - 工具提示</title>
<script src="https://unpkg.com/@popperjs/core@^2.0.0"></script>
<style>
body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f4f4f9; }
.tooltip { background-color: #333; color: #fff; padding: 8px 12px; border-radius: 4px; font-size: 14px; visibility: hidden; }
.btn { padding: 12px 24px; font-size: 16px; background-color: #6200ea; color: #fff; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease; }
.btn:hover { background-color: #3700b3; }
</style>
</head>
<body>
<button class="btn" id="tooltipButton">悬停我</button>
<div id="tooltip" class="tooltip" role="tooltip">这是一个工具提示</div>
<script>
const button = document.getElementById('tooltipButton');
const tooltip = document.getElementById('tooltip');
Popper.createPopper(button, tooltip, {
placement: 'top',
});
button.addEventListener('mouseenter', () => {
tooltip.style.visibility = 'visible';
});
button.addEventListener('mouseleave', () => {
tooltip.style.visibility = 'hidden';
});
</script>
</body>
</html>
Popper.createPopper(button, tooltip, { placement: 'top' })
用于将工具提示（tooltip）动态定位到按钮（button）的顶部，确保工具提示始终与按钮对齐；
button.addEventListener('mouseenter', ...)
监听鼠标悬停事件，当鼠标移到按钮上时显示工具提示；
button.addEventListener('mouseleave', ...)
监听鼠标离开事件，当鼠标移出按钮时隐藏工具提示
2. 下拉菜单
以下是下拉菜单示例。当用户点击按钮时，菜单将显示在按钮的下方。这里不再贴完整代码，将弹窗改为下拉即可。
3. 弹出框
以下是弹出框示例。当用户点击按钮时，弹出框将显示在按钮的右侧。
总结
通过 Popper.js，你可以轻松创建各种动态弹出框、工具提示和下拉菜单。
本文介绍了如何安装 Popper.js，并提供了三个实例代码，展示了如何使用 Popper.js 实现不同的功能。
希望这些示例能帮助你更好地理解和使用 Popper.js！
到此这篇关于安装Popper.js实现高效弹出内容管理的文章就介绍到这了,更多相关Popper.js高效弹出内容管理内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了ES6解构赋值(数组,对象,函数)使用详解,JavaScript 中最常用的两种数据结构是 Object 和 Array，解构操作对那些具有很多参数和默认值等的函数也很奏效，本文通过实例代码详细讲解需要的朋友可以参考下2022-11-11
这是一套适用于JavaScript程序的编码规范。它基于Sun的Java程序编码规范。但进行了大幅度的修改, 因为JavaScript不是Java。2010-11-11
这篇文章介绍了JS实现QQ图片一闪一闪的效果小例子，有需要的朋友可以参考一下2013-07-07
JS代码判断浏览器版本,支持IE6,IE7,IE8,IE9！做网页有时候会用到JS检测IE的版本，下面是检测Microsoft Internet Explorer版本的三种代码2013-08-08
JS可以实现很多java代码不易完成的功能,下面这篇文章主要给大家介绍了关于如何通过一篇文章带你学会JavaScript计时事件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
下面小编就为大家带来一篇关于动态执行代码(js的Eval)实例详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
这篇文章主要介绍了Bootstrap导航的简单实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要为大家详细介绍了慕课网题目之js抽奖系统功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-09-09
这篇文章主要为大家详细介绍了微信小程序scroll-view实现左右联动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
最近在学Javascript，花了半个月的时间终于把《Javascript权威指南》(推荐此书，入门级) 扫完。 在学习的过程中发现使用JS实现动态效果挺有趣的。2008-11-11
最新评论