I'm using react-modal
The documentation mentions that the modal should close when you click the overlay by default. Even if I set the shouldCloseOnOverlayClick prop to true, this still does not work.
I'm not aware of anything that might prevent that event from occurring.
In case this is relevant/indicative of anything (and I haven't figured out why this is showing), I noticed in Chrome Developer Tools that my modal's overlay and content nodes both have an undefined class. All the CSS classes I have used are defined and working as they should.
Here's the relevant JSX and CSS, please let me know if more context is required.
JSX:
return (
<div className="Modal">
<Modal
className={{
base: 'Modal-content' + ' Modal-InputError-videoURL'
}}
overlayClassName={{
base: 'Modal-overlay'
}}
isOpen={true}
contentLabel="Modal"
>
{props.message}
<br />
<br />
<br />
<button
className="Modal-button"
onClick={events.handleCloseModal}
>
Close
</button>
</Modal>
</div>
)
CSS classes:
.Modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.35);
z-index: 9998;
}
.Modal-content {
display: relative;
position: absolute;
top: 50%;
left: 50%;
border: 1px solid #ccc;
background: rgb(38,38,38);
border: 1.5px solid rgb(45,45,45);
overflow: auto;
border-radius: 1px;
outline: none;
z-index: 9999;
width: 400px;
margin-left: -150px;
margin-right: -150px;
padding: 24px;
line-height: 16px;
}
.Modal-InputError-videoURL {
height: 134px;
margin-bottom: -67px;
margin-top: -67px;
}
.Modal-button {
display: inline-block;
padding: 4px;
margin: 0;
}
I solved this problem by using onRequestClose (per the docs). It seems that react-modal doesn't store isOpen in its local state, so I provided a callback to onRequestClose that updates the state in the parent component, which is subsequently passed down to the modal as a prop.
http://reactcommunity.org/react-modal/examples/on_request_close.html
isOpen property is statically set to true. You should control its value by keeping isOpen value in your state.
isOpen = {this.state.isModelOpen}
And in handleCloseModal method you can set its value to false.
this.setState({isModelOpen: false})
I tried to use the modal in a certain component but the click overlay close was not working. Then, I moved the modal to the previous component parent, and it started work.
I guess it have to do with z-index, but I am not sure. Sorry for missing details.
Hope it helps you guys!
Related
I need to be able to use #emotion/styled CSS-in-JS library so I can pass props to the background-color and color properties of my Button component. The background-color and color of the buttons are supposed to change with the rest of the app.
The commented out section that starts the JS section:
import EmotionStyled from "https://cdn.skypack.dev/#emotion/styled#11.10.5";
import styled from "https://cdn.skypack.dev/#emotion/styled#11.10.5"
function Button(props) {
const Button = styled.button`
margin-top: 2rem;
background-color: ${props.colorChange};
color: white;
border: none;
height: 2.5rem;
border-radius: 4px;
padding: 0 1rem;
font-size: 1rem;
&:nth-of-type(1) {
margin-right: 0.5rem;
}
&:hover {
background-color: ${props.colorChange};
opacity: 0.9;
}
`
return (
<div className='buttons'>
<div className='left'>
<Button><a href='https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=%22Everything%20has%20beauty%2C%20but%20not%20everyone%20can%20see.%22%20Confucius' id='tweet-quote'
target='_blank'
rel='noreferrer'><i className="fa-brands fa-twitter"></i></a></Button>
<Button><a href='https://www.tumblr.com/login?redirect_to=https%3A%2F%2Fwww.tumblr.com%2Fwidgets%2Fshare%2Ftool%3Fposttype%3Dquote%26tags%3Dquotes%252Cfreecodecamp%26caption%3DConfucius%26content%3DEverything%2Bhas%2Bbeauty%252C%2Bbut%2Bnot%2Beveryone%2Bcan%2Bsee.%26canonicalUrl%3Dhttps%253A%252F%252Fwww.tumblr.com%252Fbuttons%26shareSource%3Dtumblr_share_button' id='tumblr-quote'
target='_blank'
rel='noreferrer'><i className="fa-brands fa-tumblr"></i></a></Button>
</div>
<Button id='new-quote'
onClick={props.handleChange}
>New quote</Button>
</div>
)
}
is supposed to replace the Button component I have in place at the moment. Whenever I use this emotion-styled Button component, everything goes blank. Please help!
Here is a link to the codepen project: https://codepen.io/lawlessIndi/pen/gOKjNMG.
I am fairly new to React and I am using styled-components.
const Button = styled.button`
height: 35px;
width: 85px;
color: #0288d1;
border: 1px solid #0288d1;
background: white;
border-radius: 1px;
&:hover {
cursor: pointer;
background: #cfe8ef;
}
&:focus {
background: #0288d1;
color: white;
}
`;
I would like to prevent the button from losing focus when the user clicks somewhere else on the screen. Would I need to add additional JavaScript code to do this or is there a CSS property that can help me with this issue?
Try below:
const setFocus = e => {
e.target && e.target.focus();
};
return (
<button
onBlur={e => {
setFocus(e);
}}
>
My Button
</button>
);
You can add :active in global stylesheet.
button:active {
border: 2px solid #000;
}
So any time, button tags receive this style in active mode.
I have come into a strange issue that has stopped me for a few hours. I have created a MERN app in which I have a page that I introduce members of a team. I also have a modal for each member triggered by click on member. The problem is that when I create a new member, the modals related to previous members is displayed behind the latter added members. I will attach pictures to more clearly demonstrate what happens.
enter image description here
enter image description here
Here is how I have defined the modal:
const Modal = ({ closeModal, children }) => {
const closeIcon = () => (
<FontAwesome
name='times'
onClick={closeModal}
className='modal-font-awesome'
/>
)
return (
<div id='overlay'>
<div className='content'>
{closeIcon()}
{children}
</div>
</div>
)
}
Here is my scss code for styling the modal:
#overlay {
position: fixed;
display: block;
overflow: hidden;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
}
.content {
margin: 120px auto;
background-color: white;
border-radius: 0.25rem;
width: 70vw;
padding: 2rem;
position: relative;
border-left: 5px solid rgb(37, 153, 124);
}
Do you have any suggestions about what is happening?
Thank you in advance.
I'm working on a react JS app , and I'm using react-modal package . I don't know how to make the outside part of the Modal ,when it is opened, completely transparent .
This is the props that I pass it to the Modal :
<Modal
onRequestClose={() => {
this.setState({ modalIsOpen: false });
}}
isOpen={modalIsOpen}
className="Modal"
></Modal>
This is the CSS code :
.Modal {
text-decoration: none;
user-select: none;
align-self: center;
justify-content: center;
align-items: center;
border: 2px solid #040408;
border-radius: 30px;
background-color: white;
margin-top: 10%;
margin-bottom: auto;
width: 20.8%;
margin-left: auto;
margin-right: auto;
overflow-x: hidden;
outline: none;
padding-left: 2px;
padding-right: 2px;
}
And this is the result that I get :
I want my modal to look just like a popup.
Do you mean background of model to be transparent? like the grey part of picture? in this case you should put it inside another div.
<div className='transparent'><Modal/></div>
Otherwise I don't understand the question.
Maybe you want to make the div fixed and max size, so it cover all the screen.
I want to design a dynamic nav tabs component. when the card is clicked relevant tab is shown, with the connection arrow and border-color green.
sample code or a suggestion would be much helpful
.
You can use accordion by bootstrap. Use css flexbox to horizontally align the tabs next to each other and bind a javascript method that changes css color properties (arrow, green color) on clicking.
Here is the link - https://getbootstrap.com/docs/4.0/components/collapse/
Here is how you can do :
.js :
import React, { Component } from "react";
import { render } from "react-dom";
import "./style.css";
const App = () => {
const selectBlock = (e) => {
e.target.classList.toggle('selected');
}
return (
<div className="block" onClick={(e) => {selectBlock(e)}}>
<div>Here is the block</div>
<div className="arrow">
<FakeArrow />
</div>
</div>
);
};
const FakeArrow = () => {
return (
<div>
<span className="arrow-down-border" />
<span className="arrow-down" />
</div>
);
};
render(<App />, document.getElementById("root"));
.css :
.block {
position: relative;
width: 150px;
height: 50px;
text-align: center;
border: 2px solid black;
}
.arrow {
display: none;
}
.block.selected {
border: 2px solid #99d32c;
}
.block.selected .arrow {
display: block;
}
/* You need to fake the arrow border with another arrow behind */
.arrow-down-border {
position: absolute;
bottom: -20px;
left: 55px; /* 150px (main block) / 2 -20px (size of the triangle)*/
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #99d32c;
}
.arrow-down{
position: absolute;
bottom: -17px;
left: 58px; /* 150px (main block) / 2 -17px (size of the triangle)*/
width: 0;
height: 0;
border-left: 17px solid transparent;
border-right: 17px solid transparent;
border-top: 17px solid #ffffff;
}
Here is the repro on Stackblitz.
Of course this is just an example, you have to set a color for the arrows so my advice would be to do it with constants or props. Same thing for the position and others functionality you can add to the FakeArrow component.
Now, it would be waaaayy easier to manage it with an image if you really need a border (this is the tricky part in your requirement), or a simple arrow without border.
You can take a look at this post, it's the same question actually, i used a slightly different way to do it with css, but the result seems to be the same.