如何使用 React 創建彈出窗口

已發表: 2022-06-29

向網站添加某些元素會產生相當大的變化。如果您遵循正確的步驟，您可以從競爭對手中脫穎而出並輕鬆吸引訪問者的注意力。

為了增加銷售轉化率並與訪問者互動，您可以從彈出窗口中受益！彈出窗口非常適合就重大問題與特定受眾聯繫。如果您有要發布的公告或要推廣的產品，彈出窗口會為您服務。

創建彈出窗口有許多不同的解決方案。在為您的網站形成彈出窗口時，您可以使用不同的編程語言和代碼。只要有一點耐心和研究，您就可以使用 React 自己創建它們。

在這篇博文中，我們解釋了React 彈出窗口是什麼以及如何為您的網站創建React 彈出窗口。

讓我們開始！

如何創建一個反應彈出窗口

什麼是反應彈出窗口？

React 是一個用於構建用戶界面的開源 JavaScript 庫。它是 Meta 為 UI 組件創建的免費使用工具。它通過開發人員工具和模板設計使 JS 編碼更具功能性。

此外，React 是一個功能強大且易於採用的庫，您可以在您的網站上使用它。 React 是用於創建彈出窗口和模式的強大工具。它易於使用且用途廣泛，使其成為許多應用的絕佳選擇。

React 彈出窗口有很多好處，包括：

輕鬆創建和自定義彈出窗口。
創建響應式的React 彈出模式。
構建在不同設備上看起來很棒的彈出窗口。

如何創建一個反應彈出窗口？

反應彈出窗口創建

使用 React 創建彈出窗口有多種方法。我們將向您展示如何創建可自定義的 React 彈出窗口。您可以通過查看這些解決方案為您的網站創建自己的彈出窗口。

React 允許用戶構建可重用的組件，因此創建彈出組件變得更加容易。例如，要使用 React JS 創建模式，您可以將“模式”屬性添加到彈出組件。

使用觸發器創建一個簡單的彈出窗口並對其進行自定義

在安裝必要的組件時，使用 reactjs-popup 創建 React 彈出窗口非常實用。使用 npm 和 yarn 安裝 reactjs-popup 後，您可以添加彈出窗口所需的元素。

您可以通過添加不同的功能來自定義先前創建的模式。例如，您可以向您的網站添加如下所示的代碼：

 import React from 'react';import Popup from 'reactjs-popup'; export default () => ( <Popup trigger={<button className="button"> Open Modal </button>} modal nested > {close => ( <div className="modal"> <button className="close" onClick={close}> &times; </button> <div className="header"> Modal Title </div> <div className="content"> {' '} Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque, a nostrum. Dolorem, repellat quidem ut, minima sint vel eveniet quibusdam voluptates delectus doloremque, explicabo tempore dicta adipisci fugit amet dignissimos? <br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur sit commodi beatae optio voluptatum sed eius cumque, delectus saepe repudiandae explicabo nemo nam libero ad, doloribus, voluptas rem alias. Vitae? </div> <div className="actions"> <Popup trigger={<button className="button"> Trigger </button>} position="top center" nested > <span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae magni omnis delectus nemo, maxime molestiae dolorem numquam mollitia, voluptate ea, accusamus excepturi deleniti ratione sapiente! Laudantium, aperiam doloribus. Odit, aut. </span> </Popup> <button className="button" onClick={() => { console.log('modal closed '); close(); }} > close modal </button> </div> </div> )} </Popup>);

連同此代碼，添加下面的代碼可讓您調整彈出窗口的詳細信息。例如，可以自定義彈出窗口的寬度、字體大小、文本對齊、位置、邊距、背景和填充等反應彈出元素。

 .modal { font-size: 12px;}.modal > .header { width: 100%; border-bottom: 1px solid gray; font-size: 18px; text-align: center; padding: 5px;}.modal > .content { width: 100%; padding: 10px 5px;}.modal > .actions { width: 100%; padding: 10px 5px; margin: auto; text-align: center;}.modal > .close { cursor: pointer; position: absolute; display: block; padding: 2px 5px; line-height: 20px; right: -10px; top: -10px; font-size: 24px; background: #ffffff; border-radius: 18px; border: 1px solid #cfcece;}

將這兩個代碼添加到您網站的代碼注入部分後，您的反應彈出窗口可能如下所示：

自定義反應彈出示例

（資源）

使用 React 創建提示彈出窗口

如果您還想從訪問者那裡收集信息，提示彈出窗口也很有用。通過提示彈出窗口，您可以根據需要向訪問者詢問他們的姓名、電子郵件和許多其他信息。

您可以創建表單來收集訪問者的數據。此外，收集訪問者的反饋是通過提示彈出窗口優化您的網站的好方法。

您可以使用如下所示的代碼使用 React 添加提示彈出窗口：

 /** The prompt content component */ class Prompt extends React.Component { constructor(props) { super(props); this.state = { value: this.props.defaultValue }; this.onChange = (e) => this._onChange(e); } componentDidUpdate(prevProps, prevState) { if (prevState.value !== this.state.value) { this.props.onChange(this.state.value); } } _onChange(e) { let value = e.target.value; this.setState({value: value}); } render() { return <input type="text" placeholder={this.props.placeholder} className="mm-popup__input" value={this.state.value} onChange={this.onChange} />; } } /** Prompt plugin */ Popup.registerPlugin('prompt', function (defaultValue, placeholder, callback) { let promptValue = null; let promptChange = function (value) { promptValue = value; }; this.create({ title: 'What\'s your name?', content: <Prompt onChange={promptChange} placeholder={placeholder} value={defaultValue} />, buttons: { left: ['cancel'], right: [{ text: 'Save', key: '⌘+s', className: 'success', action: function () { callback(promptValue); Popup.close(); } }] } }); }); /** Call the plugin */ Popup.plugins().prompt('', 'Type your name', function (value) { Popup.alert('You typed: ' + value); });

當您將此代碼添加到網站的正文部分時，它可能如下所示：