NextJS 如何在NextJS中添加弹出窗口

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和各种库或框架实现,如jQueryAngularJS、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>
);

输出

如何在NextJS中添加弹出窗口?

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程