使用React在页面中心居中显示"确认窗口"提示,可以通过以下步骤实现:
npm install react react-dom
import React from 'react';
import './ConfirmationWindow.css';
const ConfirmationWindow = () => {
return (
<div className="confirmation-window">
<p>确认窗口提示内容</p>
<button>确认</button>
<button>取消</button>
</div>
);
}
export default ConfirmationWindow;
.confirmation-window {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
border: 1px solid #ccc;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
import React from 'react';
import ConfirmationWindow from './ConfirmationWindow';
const App = () => {
return (
<div className="app">
<h1>页面标题</h1>
<div className="center">
<ConfirmationWindow />
</div>
</div>
);
}
export default App;
通过以上步骤,你可以在React应用中实现一个居中显示的"确认窗口"提示。你可以根据实际需求进行样式和功能的定制。
领取专属 10元无门槛券
手把手带您无忧上云