So I have just added a Modal from react-Modal to a page through a button click, the problem I am facing is when i click that button to make the modal pop up, it does but the content of the page the modal covers seeps through, so the Modal looks like this.
The table etc shouldn't be there, only a blank white screen.
Can anyone help me please?
Below is the first class where I click to show the modal.
const [showModal, setShowModal] = useState(false)
<button onClick={() => { setShowModal(true) }} className="paddingNextButton float-right viewButtonHover btn btn-md btn-outline-secondary"> Next</button>
<ModalForm isModalOpen={showModal} closeModal={() => { setShowModal(false) }} />
Below is another class of the Modal itself.
import React from 'react'
import Modal from 'react-modal'
import { Overlay } from 'react-bootstrap'
Modal.setAppElement('#root')
function ModalForm({ isModalOpen, closeModal }) {
return (
<div>
<Modal isOpen={isModalOpen} onRequestClose={closeModal}
style={
{
overlay: {
backgroundColor: "grey"
},
content: {
color: "red"
}
}
}
>
<h1>Title</h1>
<p></p>
</Modal>
</div>
)
}
export default ModalForm
Ah, I see the problem now. You don't have a Modal.Body, or a Modal.Header for that matter. What you need should be something like this:
<Modal isOpen={isModalOpen} onRequestClose={closeModal} style={{...}}>
<Modal.Header closeButton>
<Modal.Title>
Title
</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>Modal body goes here</p>
</Modal.Body>
</Modal>
Related
i have created a antd modal and i want to change modal body color to red here is my code,had applied background color but it is not showing also i want to align image and modalName in a row using flex, i have intalled antd version 4.2, and i am using styled components. dont know whats wrong.please help,and thanks in advance.
modal.js
import React , {useState} from "react";
import { Modal ,Button} from "antd";
import styled from "styled-components";
import "antd/dist/antd.css";
const Modall = () => {
const [isModalVisible, setIsModalVisible] = useState(false);
const showModal = () => {
setIsModalVisible(true);
}
const handleOk = () => {
setIsModalVisible(false);
}
const handleCancel = () => {
setIsModalVisible(false);
}
return (
<Wrapper>
<div className="head">hello</div>
<Button type="primary" onClick={showModal}>
Open Modal
</Button>
<Modal
title="Basic Modal"
open={isModalVisible}
onOk={handleOk}
onCancel={handleCancel}
>
<div className="modalName">hello</div>
<div className="modalHead">
<img src='simple.svg' className="newStyle"></img>
<div className="modalName" >beautiful</div>
/div>
</Modal>
</Wrapper>
);
}
export default Modall;
const Wrapper = styled.div`
.ant-modal, .ant-modal-content .ant-modal-body .modalHead{
display:flex;
}
.ant-modal, .ant-modal-content .ant-modal-body{
background:red;
}
`
not sure but i think you need to add 'bodyStyle' in your modal to add a background to your modal , kinda like this
<Modal
title="Basic Modal"
open={isModalVisible}
onOk={handleOk}
onCancel={handleCancel}
bodyStyle={{
backgroundColor: "red"
}}
>
you should put Wrapper in modal body, try this:
return (
<>
<div className="head">hello</div>
<Button type="primary" onClick={showModal}>
Open Modal
</Button>
<Modal
title="Basic Modal"
open={isModalVisible}
onOk={handleOk}
onCancel={handleCancel}
className="modalStyle"
>
<Wrapper><div className="modalName">hello</div></Wrapper>
</Modal>
</>
);
const Wrapper = styled.div`
background:red;
`
https://codesandbox.io/s/determined-chatelet-es5big?file=/src/App.js
When clicking on modal window body, it runs outer div's onClick handler. event.stoppropagation() working fine for button inside outer div and buttons inside modal but don't know how to unbind outer div click handler on modal body.
sample code (Modal is not working on csb, please run on your code editor)
import React, { useState } from "react";
import { Button, Modal } from "react-bootstrap";
export default function App() {
const [show, setShow] = useState(false);
const handleShow = (event) => {
event.stopPropagation();
setShow(true);
};
const handleClose = (event) => {
event.stopPropagation();
setShow(false);
};
const deleteModal = () => {
return (
<Modal
id="deleteModal"
className="modal"
show={show}
onHide={handleClose}
centered
size="sm"
backdrop="static"
keyboard={false}
>
<Modal.Body>
<div>
<span>Delete Tweet ?</span>
</div>
<div>This can’t be undone</div>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Cancel
</Button>
<Button variant="primary">Delete</Button>
</Modal.Footer>
</Modal>
);
};
const postHandler = () => {
alert("clicked on div");
};
return (
<div onClick={postHandler} style={{ border: "1px solid" }}>
{deleteModal()}
<h1>Hello CodeSandbox</h1>
<Button variant="info" onClick={handleShow}>
Delete
</Button>
</div>
);
}
P.S- I'm using react-bootstrap for creating modal.
return (
<>
{show && deleteModal()} // just move this logic outside the div
<div onClick={postHandler} style={{ border: '1px solid' }}>
<h1>Hello CodeSandbox</h1>
<Button variant="info" onClick={handleShow}>
Delete
</Button>
</div>
</>
);
Hey, if you just move the deleteModal outside the div then it would solve your problem.
For example, i have this functon that returns to me some ids and i get delete this posts with the id's returned with: onClick={() => { Delete(idvalue[i]) }}
However I need to open a modal before deleting the item asking if the person is sure they want to delete, and when they click on the yes I have no idea how to pass the right value to delete and where will stay this onClick to open the modal.
function Idchecker() {
for (let i = 0; i < idvalue.length; i++) {
if (idvalue[i] == item.id) {
return (
<div className="img-array">
<button className="click-img" onClick={() => { Delete(idvalue[i]) }}>
<img src={trash} alt="botão excluir" className="imgsbtns" />
</button>
<button className="click-img">
<img src={edit} alt="botão editar" className="imgsbtns" />
</button>
</div>
)
}
}
}
the modal:
return (
<Modal
{...props}
size="lg"
aria-labelledby="contained-modal-title-vcenter"
centered
style={{ fontFamily: "Questrial" }}
>
<Modal.Header>
<Modal.Title id="contained-modal-title-vcenter">
DELETE THE POST
</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>
are you sure?
</p>
<Button onClick={Delete}>YES</Button>
</Modal.Body>
<Modal.Footer>
<Button onClick={props.onHide}>CLOSE</Button>
</Modal.Footer>
</Modal>
);
}
Add two state:
openDeleteModal to manage opening modal (argument for example, you have this argument yet)
deleteId to store id.
const [openDeleteModal, setOpenDeleteModal] = useState(false);
const [deleteId, setDeleteId] = useState(null);
When you click on post you must open modal and update deleteId, so rewrite onClick function:
onClick={()=>{
setDeleteId(idvalue[i]);
setOpenDeleteModal(true)}
}
Pass deleteId and setOpenModal via props to Modal component and rewrite modal buttons function:
<Modal.Body>
<p>
are you sure?
</p>
<Button
onClick={()=>{
Delete(deleteId)
setOpenDeleteModal(false) //close modal after delete
}}>
YES
</Button>
</Modal.Body>
<Modal.Footer>
<Button onClick={()=>setOpenDeleteModal(false)}>CLOSE</Button>
</Modal.Footer>
This is a continuation from my previous post Rendering Modal Popup
After editing my code, I was able to launch my modal pop-up but had issues having it styled the same way as in the tutorial.
This is the desired styling that I pulled from a React-Boostrap tutorial
https://react-bootstrap.github.io/components/modal/
After running the same code as in the tutorial, this was my output. It's styled in plain HTML.
This is my import statement which I've used to import dependencies from the tutorial
import { Button, Modal } from 'react-bootstrap';
Updated code which successfully launched my modal pop-up
const Example = ({ show, onClose, onSave }) => (
<Modal show={show} onHide={onClose}>
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={onClose}>
Close
</Button>
<Button variant="primary" onClick={onSave}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
)
const addToCart = () => {
Axios.post(process.env.REACT_APP_BACKEND_API + "/cart/",)
.then((res) => {
setShowExample(true);
})
.catch((err) => {
if (err.response && err.response.status === 401) {
setIsLoggedIn(false);
}
});
};
<div className="field is-grouped">
<div className="control">
<button className="button is-primary" onClick={addToCart}>
ADD TO CART
</button>
<Example //added
show={showExample}
onClose={() => setShowExample(false)}
onSave={() => setShowExample(false)}
/>
</div>
I have a small issue using the React modals from Bootstrap in my app.
In index.hmtl, I import this:
<link rel="stylesheet" href="/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="/assets/css/bootstrap-theme.min.css">
However, it applies the CSS to absolutely everything in my app. I don't want this since it breaks the whole style. I can't really custom all the classes from Bootstrap in my component, so I would need to find a way to only apply these styles to my component that is the modal.
Here is my modal:
import React from 'react';
import Modal from 'react-bootstrap/Modal';
import Button from 'react-bootstrap/Button';
import { useTranslation } from 'react-i18next';
import Form from 'components/forms/Form';
import FileInput from 'components/forms/FileInput';
function PicturesUploadModal (props) {
const { t } = useTranslation('common');
return (
<Modal show={props.modalOpen} onHide={props.handleClose}>
<Modal.Header closeButton>
<Modal.Title>{ t('addPictures') }</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>{ t('numberPics') } {30 - props.images.length}</p>
<input type="file" onChange={props.handleChange} multiple />
{(props.error === true) && <p className="alert alert-danger">{t('filesErrors')}</p>}
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={props.handleClose}>
{ t('close') }
</Button>
<Button variant="primary" onClick={props.handleSubmit}>
{ t('sendSave')}
</Button>
</Modal.Footer>
</Modal>
);
}
export default PicturesUploadModal;
So, how can I make sure the the styles imported sooner are ONLY applied to the Modal component?
Thanks!
I suggest you use this awesome library since it's just the modal you are implementing:
react-modal will solve your issue, that way bootstrap doesn't mess your styles. Here is the link for the npm package: https://www.npmjs.com/package/react-modal
Try to add a class and write css ontop this
<Modal show={props.modalOpen} onHide={props.handleClose} className: 'your-class'>
import React from 'react';
import Modal from 'react-bootstrap/Modal';
import Button from 'react-bootstrap/Button';
import styled from 'styled-components'; // Import this
import { useTranslation } from 'react-i18next';
import Form from 'components/forms/Form';
import FileInput from 'components/forms/FileInput';
const Styles = styled.div`
.yourclassName{
margin: 2px;
}
`
function PicturesUploadModal (props) {
const { t } = useTranslation('common');
return (
<Styles>
<div className="yourclassName">Modal</div>
<Modal show={props.modalOpen} onHide={props.handleClose}>
<Modal.Header closeButton>
<Modal.Title>{ t('addPictures') }</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>{ t('numberPics') } {30 - props.images.length}</p>
<input type="file" onChange={props.handleChange} multiple />
{(props.error === true) && <p className="alert alert-danger">{t('filesErrors')}</p>}
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={props.handleClose}>
{ t('close') }
</Button>
<Button variant="primary" onClick={props.handleSubmit}>
{ t('sendSave')}
</Button>
</Modal.Footer>
</Modal>
</Styles>
);
}
export default PicturesUploadModal;