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
Related
When the button inside the Post clicked, Popup will render with createPortal method outside from root element's tree.
With this code that popup renders twice.
I want to render it only once.
Here's the parent Post component.
import { useState } from 'react';
import PopupModal from './PopupModal/PopupModal';
import './Post.css';
const Post = (props) => {
const postData = props;
const [isOpen, setIsOpen] = useState(false);
return (
<div className="post-container">
<div className="post-img-container">
<img className="post-img" src={props.img} alt="Travels" />
</div>
<div className="post-text-container">
<h4 className="post-heading">{props.title}</h4>
<p className="post-para">{props.description}</p>
<h1 className="post-price">{props.price}</h1>
<div className="post-btn-container">
<button onClick={() => setIsOpen(true)} className="post-btn">
Check Availability
</button>
<PopupModal dataData={postData} open={isOpen} onClose={() => setIsOpen(false)}>
Button123
</PopupModal>
</div>
</div>
</div>
);
};
export default Post;
And here's the popupModal
import React from 'react';
import ReactDOM from 'react-dom';
import '../PopupModal/popupModal.css'
const MODAL_STYLES = {
position: 'fixed',
top: '50%',
left: '50%',
transform: 'translate(-50%,-50%)',
background: '#fff',
width: '40vw',
height: '90vh',
padding: '50px',
zIndex: 1000,
};
const PopupModal = ({ open, children, onClose ,dataData }) => {
if (!open) return null;
console.log('xxx');
console.log(dataData);
return ReactDOM.createPortal(
<>
<div className='modal-overlay' ></div>
<div className='modal-container'>
<button onClick={onClose}> Popup Close</button>
{children}
</div>
</>,
document.getElementById('portal')
);
};
export default PopupModal;
Here's how I figured it rendered twice.
Here's the Popup with overlay around it which covers the background.
Thanks in advance!
Try following
{
isOpen && <PopupModal dataData={postData} open={isOpen} onClose={() => setIsOpen(false)}>
Button123
</PopupModal>
}
I am new in REACT JS so while making an app I am stuck at this part where i want to change h1 value when the button is clicked
import Button from 'react-bootstrap/Button';
import './App.css';
import { Container } from 'react-bootstrap';
import { Row } from 'react-bootstrap';
function App() {
return (
<Container>
<Row className="Row">
<div className="frame">
<h1>this text should change</h1>
<Button className=" btn btn1" color="light">YES</Button> // this button should change the text
<Button className=" btn btn2" color="light">NO</Button>
</div>
</Row>
</Container>
);
}
export default App;
Never access the real DOM. Use states and render it the React way.
I would generally use a state to change something - refer Using the State Hook. And then render it out. Create this:
const [Text, setText] = useState("this text should change");
Render it:
<h1>{Text}</h1>
Use the event handler and use a type="button" so that it doesn't refresh the page:
<Button
className=" btn btn1"
color="light"
type="button"
onClick={() => {
setText("Praveen is awesome! You clicked on YES button!");
}}
>
YES
</Button>
{/*// this button should change the text*/}
<Button
className=" btn btn2"
color="light"
type="button"
onClick={() => {
setText("Praveen is awesome! You clicked on NO button!");
}}
>
NO
</Button>
Now see the magic: https://557w4.csb.app/
Code:
import Button from "react-bootstrap/Button";
import "./App.css";
import { Container } from "react-bootstrap";
import { Row } from "react-bootstrap";
import { useState } from "react";
function App() {
const [Text, setText] = useState("this text should change");
return (
<Container>
<Row className="Row">
<div className="frame">
<h1>{Text}</h1>
<Button
className=" btn btn1"
color="light"
type="button"
onClick={() => {
setText("Praveen is awesome! You clicked on YES button!");
}}
>
YES
</Button>
{/*// this button should change the text*/}
<Button
className=" btn btn2"
color="light"
type="button"
onClick={() => {
setText("Praveen is awesome! You clicked on NO button!");
}}
>
NO
</Button>
</div>
</Row>
</Container>
);
}
export default App;
Preview
Full CodeSandBox: https://codesandbox.io/s/broken-snow-557w4?file=/src/App.js
In this case, you have to use the hook state (Documentation).
So, first of all you have to import the useState hook, then create it and finally use it.
So, your code will be something like that:
import Button from 'react-bootstrap/Button';
import './App.css';
import { Container } from 'react-bootstrap';
import { Row } from 'react-bootstrap';
import { useState } from 'react';
function App() {
const [text, setText] = useState("this text should change");
return (
<Container>
<Row className="Row">
<div className="frame">
<h1>{text}</h1>
<Button className=" btn btn1" color="light" onClick={e => setText("new text")}>YES</Button> // this button should change the text
<Button className=" btn btn2" color="light">NO</Button>
</div>
</Row>
</Container>
);
}
export default App;
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.
I'm new to programming. Here I have an antd modal and I've been trying to find a way to make it full screen. I want the modal to be full scree when it's opened and it shouldn't have any margin or paddings. For example, in the code I added width={1000} but there is still some margin on the left and right of the modal.
So how do I make the modal to take the whole screen without any margin and padding?
code:
https://codesandbox.io/s/otjy6?file=/index.js:539-560
Remove the fixed value for modal width and the centered attribute from your code file:
index.js
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Modal, Button } from 'antd';
const App = () => {
const [visible, setVisible] = useState(false);
return (
<>
<Button type="primary" onClick={() => setVisible(true)}>
Open Modal of 1000px width
</Button>
<Modal
title="Modal 1000px width"
// This was removed
// centered
visible={visible}
onOk={() => setVisible(false)}
onCancel={() => setVisible(false)}
// This was removed
// width={'1000'}
>
<p>some contents...</p>
<p>some contents...</p>
<p>some contents...</p>
</Modal>
</>
);
};
ReactDOM.render(<App />, document.getElementById('container'));
You need to add these CSS rules to the CSS file.
index.css
.ant-modal, .ant-modal-content {
height: 100vh;
width: 100vw;
margin: 0;
top: 0;
}
.ant-modal-body {
height: calc(100vh - 110px);
}
you need to unset max-width and margin of modal
.ant-modal {
max-width: unset;
margin: unset;
}
you need to unset content in before pseudo-element of ant-modal-centered class
.ant-modal-centered::before {
content: unset;
}
Working Demo
I think instead of Modal you can use the Antd Drawer. Here is the implementation.
import React,{useState} from 'react';
import {Drawer} from 'antd;
const FullScreenDrawer = ()=>{
const [visible,setVisible] = useState(false)
return(
<>
<button onClick={()=>setVisible(true)/>
<Drawer
visible={isVisible}
onClose={() => setVisible(false)}
width="100VW"
>
The content goes here
</Drawer>
</>
);
}
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>