I am using foundation for css. When an icon is clicked to add persona, a modal should appear. How can i open a modal without using jquery?
Here is my code
export default class Campaign extends Component {
state = {
adsShow: false,
personasShow: false
};
handlePersonasClick = () =>
this.setState({ personasShow: !this.state.personasShow });
renderCampaigns = () => {
return campaigns.map((campaign, i) => {
return (
<Collapsible
key={campaign.name}
trigger={this.campaignTitle(campaign)}
classParentString="campaignsCollapse">
<div className="Ads">
<span className="cmpTitle">Ads</span>
<span className="editCampaign">
<FaPlusCircle onClick={this.handleClick} />
</span>
</div>
<div className="AdsList">
{this.state.adsShow
? <CreateNewAd
personasClick={this.handlePersonasClick}
personasShow={this.state.personasShow}
/>
: null}
{this.renderAdLists(campaign.ads)}
</div>
</Collapsible>
);
});
};
render() {
return (
<div style={{ padding: '10px 20px' }}>
<h3>Campaigns</h3>
<div className="campaignsContainer">
{this.renderCampaigns()}
</div>
</div>
);
}
}
const CreateNewAd = props => {
return (
<Collapsible trigger={adsTitle()} classParentString="adsCollapse" open>
<p>
Personas
{' '}
<span><FaPlusCircle onClick={props.personasClick} /></span>
{props.personasShow ? <Personas /> : null}
</p>
</Collapsible>
);
};
export const Personas = () => {
return (
<div
id="myModal"
className="reveal-modal"
data-reveal
aria-labelledby="modalTitle"
aria-hidden="true"
ref={modal => {
this.modal = modal;
}}
role="dialog">
<h2 id="modalTitle">Awesome. I have it.</h2>
<a className="close-reveal-modal" aria-label="Close">×</a>
</div>
);
};
the following code snippet is on the CreateNewAd component which is a child component of Campaign Component. When FaPlusCircle icon is clicked a modal should appear. How can i do that when following top to bottom approach and without using jquery ?
UPDATE
have created a sandbox. here is the link https://codesandbox.io/s/qx9Pv1lry . You have to click on magazine print. An accordion menu shows up. After that click on click text that is aside Ads text. There you will see open modal text. Where clicking should open a modal which is what the question is about.
Related
Here's what I've have so far - Full working view https://codesandbox.io/s/hungry-elbakyan-v3h96
Accordion component:
const Accordion = ({ data }) => {
return (
<div className={"wrapper"}>
<ul className={"accordionList"}>
{data.map((item) => {
return (
<li className={"accordionListItem"} key={item.title}>
<AccordionItem {...item} />
</li>
);
})}
</ul>
</div>
);
};
const AccordionItem = ({ content, title }) => {
const [state, setState] = useState({
isOpened: false
});
return (
<div
className={cn("accordionItem", state.isOpened && "opened")}
onClick={() => setState({ isOpened: !state.isOpened })}
>
<div className={"lineItem"}>
<h3 className={"title"}>{title}</h3>
<span className={"icon"} />
</div>
<div className={"inner"}>
<div className={"content"}>
<p className={"paragraph"}>{content}</p>
</div>
</div>
</div>
);
};
When I click on the accordion item nothing happens. I can see the content appears in inspect and the state changes as expected but it doesn't slide down. Did I miss something in my css or component?
Here is what I was able to achieve. You may not like it completely(animations). But things seems sorted
https://codesandbox.io/s/relaxed-babbage-2zt4f?file=/src/styles.css
props name was not right for accordion body
and styles need to be changes once the accordion is in open state.
You need to add or remove the className inner when state.isOpen so you can see your content
I'm using react and have a list with images, when hovered them it shows a text and when clicked it opens a modal, but each "li" has different content that goes in the modal. The problems is that every item of the list open only one modal, the last one, how can I do to open the correct modal?
Modal code
constructor(props) {
super(props);
this.state = {
visible : false
}
}
openModal() {
this.setState({
visible : true,
});
}
closeModal() {
this.setState({
visible : false,
});
}
list with the modal
<li className="bor">
<img src={bor}/>
<span className="first">teste</span>
<span className="second">veja o case completo</span>
<input type="button" onClick={() => this.openModal()} />
<section>
<Modal className="modal" visible={this.state.visible} width="90%" height="90%" effect="fadeInUp" onClickAway={() => this.closeModal()}>
<div className="close">
<a href="javascript:void(0);" onClick={() => this.closeModal()}>X</a>
</div>
<div>
<h1>teste1</h1>
</div>
</Modal>
</section>
</li>
<li className="baz">
<img src={baz}/>
<span className="first">teste2</span>
<span className="second">veja o case completo</span>
<input type="button" onClick={() => this.openModal()} />
<section>
<Modal className="modal" visible={this.state.visible} width="90%" height="90%" effect="fadeInUp" onClickAway={() => this.closeModal()}>
<div className="close">
<a href="javascript:void(0);" onClick={() => this.closeModal()}>X</a>
</div>
<div>
<h1>teste2</h1>
</div>
</Modal>
</section>
</li>
As #FatemehQasemkhani said it is best practice to use single modal & pass corresponding data like below. I approaced same way & it is working fine. I am taking some dummy data inside items. Whenever user is clicking on any list(li) item I am storing that currrent clicked item inside activeItemData and passing that value in modal.
import React, { Component } from "react";
import Modal from "react-awesome-modal";
class ProList extends Component {
constructor(props) {
super(props);
this.state = {
visible: false,
activeItemData: "",
items: [
{
desc: "this is item 1 "
},
{
desc: "this is item 2"
}
]
};
}
closeModal() {
this.setState({
visible: false
});
}
handleCurrentItem = item => {
// you can set two properties in setState or you can set visible property in callback also...
this.setState(
{
activeItemData: item.desc,
visible:true
},
// () => this.setState({ visible: true })
)
};
render() {
return (
<div>
<ul>
{ this.state.items.map(item => (
<li key={item.desc} onClick={() => this.handleCurrentItem(item)}>
{item.desc}
</li>
))}
</ul>
<Modal
className="modal"
visible={this.state.visible}
width="90%"
height="90%"
effect="fadeInUp"
onClickAway={() => this.closeModal()}
>
<div className="close">
<a href="javascript:void(0);" onClick={() => this.closeModal()}>
X
</a>
</div>
<div>
<h1>{this.state.activeItemData}</h1>
</div>
</Modal>
</div>
)
}
}
I have a PLUS button that open a Materialize CSS Modal in React :
Plus button
import React from "react";
const AddBtn = ({ tooltipMessage, hrefDescription }) => {
const hrefAddBtn = "#" + hrefDescription;
return (
<div className="fixed-action-btn">
<a
href={hrefAddBtn}
data-position="left"
data-tooltip={tooltipMessage}
className="btn-floating btn-large blue darken-2 modal-trigger tooltipped"
>
<i className="large material-icons">add</i>
</a>
</div>
);
};
export default AddBtn;
And the Modal :
const CreditModal = ({ closeModal }) => {
return (
<Fragment>
<div id="add-balance" className="modal" style={modalStyle}>
..... A lot of code goes here
<div>
</Fragment>
);
}
Both of them inside a component :
const AddCredit = ({........}) => {
return (
<div className="container">
{someBoolean === true? (
<Fragment>
<AddBtn tooltipMessage="Add Credit" hrefDescription="add-balance" />
<CreditModal closeModal={closeModalAndOpenIFrame} />
</Fragment>
) : (
<Fragment>
// Show some other Component
</Fragment>
)}
</div>
)
}
When I close the frame using a button the modal closes but the overlay remains , it looks like this :
<div class="modal-overlay" style="z-index: 1002; display: block; opacity: 0.5;"></div>
It's not my doing , probably it comes from the modal and remains , and the only way to get rid of this is clicking on the overlay , and I don't want that.
How can we remove this overlay programmatically ?
on close button click function make the class display none
for example
$("button").click(function(){
$(".modal-overlay").css("display","none");
});
Created a catalog, when you click on the "more info" button a pop up modal. pops up but the image and description isnt showing in the pop up modal
let { itemInfo } = this.props;
let removeCom;
if (itemInfo.description) {
removeCom = itemInfo.description
.replace("?", "")
.replace('<td width="110" height="">', "")
.replace("http://extranet.acetools.com/Catalog/",
"assets/img/items/")
.replace((/<INPUT[^>]*>/gmi), "")
.split('<CENTER><FONT COLOR="RED">', 1);
console.log(removeCom);
}
return (
<h6 className="card-header" style={cardHeader}>
Item # {this.props.itemInfo.item_no} - {this.props.itemInfo.item}
</h6>
<div className="card-body" style={cardBody}>
<div className="row">
<div className="col-6" dangerouslySetInnerHTML={{__html:
removeCom}} style={text}>
</div>
<div className="col-6">
<img src={this.props.itemInfo.image} alt="" style= .
{productImg}></img>
</div>
{/* <div>hello</div> */}
</div>
<div className="row">
<button className="btn btn-outline-primary" onClick= .
{this.props.onClose} style={closeButton}>
Close
</button>
Franky, check this example out:
import { Button, Text, View } from 'react-native'
class ErrorModal extends React.Component {
render() {
const { modal: { closeModal, params } } = this.props
return (
<View>
<Text>An error occured!</Text>
<Text>{params.errorMessage}</Text>
<Button onPress={closeModal} title="OK" />
</View>
)
}
}
export default ErrorModal
Check to see if you're passing props through use of destructuring and check your routes. I hope this helps.
I made a modal using Bootstrap, however I need a confirmation modal that goes above it. This second one will appear as a confirmation dialog for when one of the first modal's buttons are pressed.
This is roughly what my code looks like:
constructor(props) {
super(props)
this.state = {
displayConfirmModal: false
}
}
confirmModal () {
return (
<div ref={(ref) => { (this.modal = ref) }} className='modal fade' id='confirm' tabIndex={-1} role='dialog' aria-labelledby='GPA Modal'>
<section>
<h3>Are you sure of this?</h3>
<button
className='btn btn-danger'
onClick={()=> doTheThing()}>
Yes
</button>
<button
className='btn btn-danger'
onClick={()=> hideConfirmModal()}>
No
</button>
</section>
</div>
)
}
render () {
return (
<div>
<div ref={(ref) => { (this.modal = ref) }} className='modal fade' id='main' tabIndex={-1} role='dialog' aria-labelledby='GPA Modal'>
<section>
<a className='close' data-dismiss='modal' aria-label='Close' onClick={() => this.hideModal()}>close</a>
<div className='frame'>
<h1>My first modal</h1>
<button
className='btn btn-default'
onClick={() => { this.setState({displayConfirmModal: true})}}>
Open confirmation modal
</button>
</div>
</section>
</div>
{ this.state.displayConfirmModal ? this.confirmModal() : null }
</div>
)
}
As it is right now when I click on the Open confirmation modal button, it sets my displayConfirmModal state to true, but doesn't display the modal.
However, if I start the displayConfirmModal state on true, it does display it, and when I close it, it closes the whole thing.
How do I do this? And if so, is there a better alternative way of doing this?
Thanks!