Web开发基础学习——通过React示例学习模态对话框

Web开发基础学习系列文章目录

第一章 基础知识学习之通过React组件学习模态对话框


文章目录


前言

模态对话框(Modal Dialog)是一种用户界面元素,它在当前窗口上显示一个对话框,要求用户与之交互后才能返回到主界面。模态对话框通常用于获取用户输入、显示重要信息或确认用户操作。它会阻止用户与主界面进行交互,直到对话框被关闭。

特点

  • 阻止交互:在模态对话框打开时,用户无法与主界面的其他部分进行交互。
  • 集中注意力:模态对话框通常用于需要用户集中注意力的操作,如表单填写、确认删除等。
  • 覆盖主界面:模态对话框通常会覆盖主界面的部分或全部内容,通常带有半透明的背景遮罩。

下面是一个简单的 React 示例,展示如何创建和使用模态对话框(Modal)。这个示例包括一个按钮来打开模态对话框,并且可以关闭它。


一、创建新的 React 应用

首先,确保你已经安装了 Node.js 和 npm(Node 包管理器)。然后,可以使用 Create React App 来初始化一个新的项目。

bash 复制代码
npx create-react-app my-modal-app
cd my-modal-app

二、 创建模态对话框组件

在 src 文件夹中创建一个新的文件 Modal.js,并添加模态对话框的代码。

javascript 复制代码
import React from 'react';
import './Modal.css';

function Modal({ onClose }) {
    return (
        <div className="modal-overlay">
            <div className="modal">
                <h2>这是一个模态对话框</h2>
                <p>你可以在这里添加任何内容。</p>
                <button onClick={onClose}>关闭</button>
            </div>
        </div>
    );
}

export default Modal;

三、修改 App.js

用以下代码替换 src/App.js 的内容,以加入模态对话框的功能。

javascript 复制代码
import React, { useState } from 'react';
import Modal from './Modal';
import './App.css';

function App() {
    const [isModalOpen, setModalOpen] = useState(false);

    const openModal = () => {
        setModalOpen(true);
    };

    const closeModal = () => {
        setModalOpen(false);
    };

    return (
        <div className="App">
            <h1>模态对话框示例</h1>
            <button onClick={openModal}>打开模态对话框</button>

            {isModalOpen && <Modal onClose={closeModal} />}
        </div>
    );
}

export default App;

四、 添加样式

创建两个样式文件,分别为 App.css 和 Modal.css。

  1. src/App.css
css 复制代码
.App {
    text-align: center;
    padding: 20px;
}

button {
    padding: 10px 20px;
    font-size: 16px;
}
  1. src/Modal.css
css 复制代码
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal {
    background: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

五、启动应用

确保你在项目目录下,然后运行以下命令启动应用:
npm start

六、访问应用

打开浏览器并访问 http://localhost:3000,你应该能看到一个页面,包含一个按钮,点击该按钮会打开模态对话框。


总结

  • HTML 提供网页的结构和内容。
  • CSS 控制网页的外观和样式。
  • JavaScript 为网页添加动态交互和功能。
    这三者相辅相成,共同构建出丰富多彩的网页体验。
相关推荐
摇滚侠2 分钟前
Spring Boot 3零基础教程,WEB 开发 默认的自动配置,笔记25
前端·spring boot·笔记
Cherry Zack4 分钟前
Vue Router 路由管理完全指南:从入门到精通前言
前端·javascript·vue.js
报错小能手10 分钟前
linux学习笔记(35)C语言连接mysql
linux·笔记·学习
jjjxxxhhh12322 分钟前
【学习】USB摄像头 -> FFmpeg -> H264 -> AI模型
人工智能·学习·ffmpeg
亮子AI33 分钟前
【npm】npm install 产生软件包冲突怎么办?(详细步骤)
前端·npm·node.js
汪汪大队u1 小时前
为什么 filter-policy 仅对 ASBR 的出方向生效,且即使在该生效场景下,被过滤的路由在协议内部(如协议数据库)依然存在,没有被彻底移除?
服务器·前端·网络
_dindong1 小时前
笔试强训:Week -2
笔记·学习·算法
慧一居士1 小时前
vue.config.js 文件功能介绍,使用说明,对应完整示例演示
前端·vue.js
颜酱1 小时前
用导游的例子来理解 Visitor 模式,实现AST 转换
前端·javascript·算法
deng-c-f1 小时前
Linux C/C++ 学习日记(26):KCP协议(二):kcp源码分享
c语言·c++·学习·网络编程·kcp