代码拉取完成,页面将自动刷新
Responsive React Popup built with Bootstrap 5. Examples include modal popup, popup box, notification message popup, alert popup, lightbox popup & popup form.
Check out React Bootstrap Popup Documentation for detailed instructions & even more examples.
import React, { useState } from 'react';
import {
MDBBtn,
MDBModal,
MDBModalDialog,
MDBModalContent,
MDBModalHeader,
MDBModalTitle,
MDBModalBody,
MDBModalFooter,
} from 'mdb-react-ui-kit';
export default function App() {
const [basicModal, setBasicModal] = useState(false);
const toggleShow = () => setBasicModal(!basicModal);
return (
<>
<MDBBtn onClick={toggleShow}>LAUNCH DEMO MODAL</MDBBtn>
<MDBModal show={basicModal} setShow={setBasicModal} tabIndex='-1'>
<MDBModalDialog>
<MDBModalContent>
<MDBModalHeader>
<MDBModalTitle>Modal title</MDBModalTitle>
<MDBBtn className='btn-close' color='none' onClick={toggleShow}></MDBBtn>
</MDBModalHeader>
<MDBModalBody>...</MDBModalBody>
<MDBModalFooter>
<MDBBtn color='secondary' onClick={toggleShow}>
Close
</MDBBtn>
<MDBBtn>Save changes</MDBBtn>
</MDBModalFooter>
</MDBModalContent>
</MDBModalDialog>
</MDBModal>
</>
);
}
Download MDB React - free UI KIT
Choose your favourite customized component and click on the image
Copy & paste the code into your MDB project
▶️ Subscribe to YouTube channel for web development tutorials & resources
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。