NextJS 如何在NextJS中添加弹出窗口
我们可以通过使用 react-modal 或 reactjs-popup 等库在 NextJS 中添加弹出窗口。这将使我们能够创建一个模态组件,可以很容易地集成到我们的NextJS应用程序。我们还可以使用CSS来设计弹出式窗口,以配合我们网站的设计。
让我们先了解一下Next.js是什么。Next.js是一个开源的网络开发框架。Next.js是基于React的框架,具有服务器端渲染能力。速度和SEO都很好。你可以使用Next.js简单地构建和测试复杂的基于反应的应用程序。
Next.js是用Typescripts编写的。它提供了一个链接组件,将其他组件链接在一起,并有一个预取属性,允许后台预取页面资源。它能够动态导入React组件和JavaScript模块。另外使你能够导出你的网络应用程序的整个静态站点。
Next.js允许你从一个JavaScript文件中导入CSS文件。这是可能的,因为Next.js将导入 的概念扩展到了JavaScript之外。
网页开发中的弹出窗口是指出现在当前网页顶部的一个小窗口,通常包含用户的额外信息或选项。
弹出式窗口可以由各种动作触发,如点击按钮或链接、在某个元素上悬停,或由定时事件触发。弹出窗口可用于各种目的,如显示信息、表格或广告。它们也可以用来收集信息或在继续进行之前确认一项行动。弹出窗口可以用JavaScript和各种库或框架实现,如jQuery、AngularJS、React和Vue.js。
要开始使用,首先要创建一个新的NextJS应用程序,并在我们的开发服务器上运行,像这样 —
npx create-next-app popup-app
cd phone-input
npm start
方法
- 安装 react-modal 包 -在终端运行 npm install react-modal 命令。
-
在你的Next.js组件中导入react-modal组件。
import Modal from 'react-modal'
- 创建一个状态变量来控制模态的可见性:
const [isOpen, setIsOpen] = useState(false)
- 添加一个按钮或链接,以触发模态的打开—-。
<button onClick={() => setIsOpen(true)}>Open Modal</button>
- 将react-modal组件添加到你的JSX中 –
<Modal isOpen={isOpen} onRequestClose={() => setIsOpen(false)}>
- 在react-modal组件内添加模态的内容 –
<Modal isOpen={isOpen} onRequestClose={() => setIsOpen(false)}> <h1>Modal Content</h1> </Modal>
- 添加一个按钮或链接来关闭模态:
<button onClick={() => setIsOpen(false)}>Close Modal</button>
- 使用样式道具为模态添加样式—-。
<Modal isOpen={isOpen} onRequestClose={() => setIsOpen(false)} style={customStyles}>
- 在你的组件中添加customStyles变量—。
const customStyles = { overlay: { backgroundColor: 'rgba(0, 0, 0, 0.6)' }, content: { top: '50%', left: '50%', right: 'auto', bottom: 'auto', marginRight: '-50%', transform: 'translate(-50%, -50%)' } }
- 通过点击打开模态按钮测试模态,并确保它按预期打开和关闭。
模态工作的最终结果将是 —
例子
MyComponent.js:
import React, { useState } from 'react'
import Modal from 'react-modal'
const MyComponent = () => {
const [isOpen, setIsOpen] = useState(false)
const customStyles = {
overlay: {
backgroundColor: 'rgba(0, 0, 0, 0.6)'
},
content: {
top: '50%',
left: '50%',
right: 'auto',
bottom: 'auto',
marginRight: '-50%',
transform: 'translate(-50%, -50%)'
}
}
return (
<div>
<button onClick={() => setIsOpen(true)}>Open Modal</button>
<Modal isOpen={isOpen} onRequestClose={() => setIsOpen(false)} style={customStyles}>
<h1>Modal Content</h1>
<button onClick={() => setIsOpen(false)}>Close Modal</button>
</Modal>
</div>
)
}
export default MyComponent
Index.js
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import MyComponent from "./MyComponent";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
<StrictMode>
<MyComponent />
</StrictMode>
);