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>
);