手把手教你实现一个modal对话框

最新推荐文章于 2024-08-21 09:17:03 发布

daysRoc

最新推荐文章于 2024-08-21 09:17:03 发布

阅读量1.8k

点赞数 1

分类专栏： Javascript React 文章标签： modal react 原生方式

本文链接：https://blog.csdn.net/Donspeng/article/details/84032837

版权

本文手把手教你如何用React实现一个modal对话框，包括点击按钮弹出、事件捕捉、内容可变等功能。从创建简单对话框开始，逐步增加过渡效果、关闭按钮、标题、内容和操作按钮等，最后展示如何封装成React组件。

摘要由CSDN通过智能技术生成

需求：
1、点击一个按钮弹出对话框
2、对话框的事件能够被父组件捕捉
3、对话框里的内容能够随时改变
一、如何实现一个对话框
1.1 创建一个简单的对话框
简而言之，一个简单的对话框就是一个div（也可能是几个div），怎么创建呢？

function createModal () {
	//创建一个div
	var modalDiv = document.createElement('div');           
	// 给div加点内容
	var modalText=document.createTextNode("这是对话框");  
	modalDiv.appendChild(modalText);
	// 给div加点样式，给他放在页面中间
	modalDiv.style.position = 'absolute';
	modalDiv.style.width = '400px';
	modalDiv.style.height = '400px';
	modalDiv.style.left = 0;
	modalDiv.style.right = 0;
	modalDiv.style.top = 0;
	modalDiv.style.bottom = 0;
	modalDiv.style.margin = 'auto';
	modalDiv.style.backgroundColor = 'grey';
	// 把div放到页面中
	document.body.appendChild(modalDiv);
}
// 创建一个按钮触发这个事件，如果你比较懒，可以把createModal中的内容copy到console中，就可以看到对话框了
<button type&