如何在NextJS中新增彈窗？

我們可以使用`react-modal`或`reactjs-popup`之類的庫在NextJS中新增彈窗。這將允許我們建立一個模態元件，可以輕鬆地整合到我們的NextJS應用程式中。我們也可以使用CSS來設定彈窗的樣式，使其與我們網站的設計相匹配。

讓我們首先了解什麼是Next.js。Next.js是一個開源的Web開發框架。Next.js是一個基於React的框架，具有伺服器端渲染功能。速度和SEO都非常出色。您可以使用Next.js輕鬆構建和測試複雜的基於React的應用程式。

Next.js是用TypeScript編寫的。它提供了一個`Link`元件，用於將其他元件連結在一起，並具有一個`prefetch`屬性，允許後臺預取頁面資源。它支援React元件和JavaScript模組的動態匯入。此外，它還允許您匯出Web應用程式的整個靜態站點。

Next.js允許您從JavaScript檔案中匯入CSS檔案。這是可能的，因為Next.js擴充套件了`import`語句在JavaScript中的概念。

在Web開發中，彈窗是指出現在當前網頁頂部的的小視窗，通常包含其他資訊或使用者選項。

彈窗可以由各種操作觸發，例如單擊按鈕或連結，懸停在元素上，或透過定時事件。彈窗可以用於各種目的，例如顯示訊息、表單或廣告。它們還可以用於在繼續操作之前收集資訊或確認操作。可以使用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>

  • 使用`style`屬性為模態新增樣式：

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

輸出

更新於：2023年2月10日

16K+ 次瀏覽

啟動你的職業生涯

透過完成課程獲得認證

開始學習
廣告