I was following a template I found online to have a modal pop up when hovering over my cards with bootstrap 5.
This is my code so far:
class SavedEpisodes extends Component {
$(function() {
$('[data-toggle="modal"]').hover(function() {
var modalId = $(this).data('target');
$(modalId).modal('show');
});
});
render() {
const { userId, savedEpisodes, deleteSavedEpisode } = this.props;
console.log(savedEpisodes, "saved episodes-----");
return (
<>
<h1>Saved Episodes:</h1>
<div className="row p-5 m-2">
{savedEpisodes?.map((saved) => {
return (
<div className="col-md-2" key={saved.episode.id}>
<div
className="card"
data-toggle="modal"
data-target="#basicExampleModal"
>
<img
src={saved.episode.images[1].url}
alt="podcastimg"
className="card-img-top"
/>
<div className="card-body">
<h5 className="card-title" style={{ textAlign: "center" }}>
<Link
to={`/episode/${saved.episode.id}`}
className="stretched-link"
>
<span style={{ fontWeight: "bold", color: "white" }}>
{saved.episode.name}
</span>
</Link>
</h5>
</div>
</div>
</div>
);
})}
<div
className="modal fade"
id="basicExampleModal"
tabIndex="-1"
role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div className="modal-dialog" role="document">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="exampleModalLabel">
Modal title
</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">...</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-dismiss="modal"
>
Close
</button>
<button type="button" class="btn btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>
</div>
</>
);
}
}
I never used jQuery before so I'm not sure where to put that function for hovering, inside my class or not. I also tried to remove the $ because I was getting an error but that didn't seem to fix it either.
How do I get a modal to pop up only when hovering over my cards?
Thanks in advance!
This way of coding is not correct.React js is completely different from jquery
You can use React-bootstrap if you want to use bootstrap in react component. On the other hand, Modal should triggered with click event.you should use popover,tooltip,.. which hovered on cart element.
This resources can help you:
https://react-bootstrap.netlify.app/components/overlays/
https://react-bootstrap.netlify.app/components/modal/
If you do not want to use external libraries, you can use portal in react:
https://reactjs.org/docs/portals.html
This is not so react way. I would recommend to you using states and control your modal with this state. You can use onMouseEnter event and can set your boolean state inside. Also you should set your state again in onClick event of button to close modal
Related
I wanted to toggle modal after a promise is resolved, which is triggered on button click. As per official doc modal.toggle() should do the magic but it is not working. I am using bootstrap's version 5.2.2. I can't use react-bootstrap.
import React from "react";
import { Modal } from "bootstrap";
const ExampleModal = () => {
const toggleModal = () => {
const myModalEl = document.getElementById('exampleModalToggle')
const modal = new Modal(myModalEl);
modal.toggle();
};
return (
<>
<div
className="modal fade"
id="exampleModalToggle"
aria-hidden="true"
aria-labelledby="exampleModalToggleLabel"
tabindex="-1"
>
<div className="modal-dialog modal-dialog-centered">
<div className="modal-content">
<div className="modal-header">
<h1 className="modal-title fs-5" id="exampleModalToggleLabel">
Modal 1
</h1>
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div className="modal-body">
Show a second modal and hide this one with the button below.
</div>
<div className="modal-footer">
<button
onClick={toggleModal}
className="btn btn-primary"
data-bs-target="#exampleModalToggle2"
// data-bs-toggle="modal" // wanted to toggle after a promise is resolved
>
Open second modal
</button>
</div>
</div>
</div>
</div>
<div
className="modal fade"
id="exampleModalToggle2"
aria-hidden="true"
aria-labelledby="exampleModalToggleLabel2"
tabindex="-1"
>
<div className="modal-dialog modal-dialog-centered">
<div className="modal-content">
<div className="modal-header">
<h1 className="modal-title fs-5" id="exampleModalToggleLabel2">
Modal 2
</h1>
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div className="modal-body">
Hide this modal and show the first with the button below.
</div>
<div className="modal-footer">
<button
className="btn btn-primary"
data-bs-target="#exampleModalToggle"
data-bs-toggle="modal"
>
Back to first
</button>
</div>
</div>
</div>
</div>
<a
className="btn btn-primary"
data-bs-toggle="modal"
href="#exampleModalToggle"
role="button"
>
Open first modal
</a>
</>
);
};
export default ExampleModal;
I have prepared above sample code and ran this code on sandbox. This is also unable to toggle the modal. Also the background shadow is getting darker after each button click. This is same behaviour i am experiencing in my project.
Here is the updated code which worked for me.
import React, { useRef } from "react";
import { Modal } from "bootstrap";
const ExampleModal = () => {
const myModalEl1 = useRef(null);
const myModalEl2 = useRef(null);
const toggleModal = () => {
// const myModalEl1 = document.getElementById("exampleModalToggle");
const modal = Modal.getInstance(myModalEl1.current, {});
modal.toggle();
// const myModalEl2 = document.getElementById("exampleModalToggle2");
const modal2 = Modal.getOrCreateInstance(myModalEl2.current, {});
modal2.toggle();
};
return (
<>
<div
className="modal fade"
id="exampleModalToggle"
ref={myModalEl1}
aria-hidden="true"
aria-labelledby="exampleModalToggleLabel"
tabindex="-1"
>
<div className="modal-dialog modal-dialog-centered">
<div className="modal-content">
<div className="modal-header">
<h1 className="modal-title fs-5" id="exampleModalToggleLabel">
Modal 1
</h1>
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div className="modal-body">
Show a second modal and hide this one with the button below.
</div>
<div className="modal-footer">
<button
onClick={toggleModal}
className="btn btn-primary"
data-bs-target="#exampleModalToggle2"
// data-bs-toggle="modal" // wanted to toggle after a promise is resolved
>
Open second modal
</button>
</div>
</div>
</div>
</div>
<div
className="modal fade"
id="exampleModalToggle2"
aria-hidden="true"
ref={myModalEl2}
aria-labelledby="exampleModalToggleLabel2"
tabindex="-1"
>
<div className="modal-dialog modal-dialog-centered">
<div className="modal-content">
<div className="modal-header">
<h1 className="modal-title fs-5" id="exampleModalToggleLabel2">
Modal 2
</h1>
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div className="modal-body">
Hide this modal and show the first with the button below.
</div>
<div className="modal-footer">
<button
className="btn btn-primary"
data-bs-target="#exampleModalToggle"
data-bs-toggle="modal"
>
Back to first
</button>
</div>
</div>
</div>
</div>
<a
className="btn btn-primary"
data-bs-toggle="modal"
href="#exampleModalToggle"
role="button"
>
Open first modal
</a>
</>
);
};
export default ExampleModal;
Need to active modal component on other component using onClick Function.
Using Bootsratp-react modal
import Modal from 'react-bootstrap/Modal'
import Button from 'react-bootstrap/Button'
import { useState } from 'react';
const UserModal=()=> {
const [smShow, setSmShow] = useState(false);
return (
<>
<Button onClick={() => setSmShow(true)} className="me-2">Small modal</Button>
<Modal
size="sm"
show={smShow}
onHide={() => setSmShow(false)}
aria-labelledby="example-modal-sizes-title-sm"
>
<Modal.Header closeButton>
<Modal.Title id="example-modal-sizes-title-sm">
Small Modal
</Modal.Title>
</Modal.Header>
<Modal.Body>...</Modal.Body>
</Modal>
</>
);
}
export default UserModal
The modal components got button, but i need his functionality in other component.
The modal should be opening after onclick function and if statement.
Thank you!
You can solve this by getting its state by parameter. Instead of inserting inside that component. That way you could reuse it in a simpler way.
example: https://codesandbox.io/embed/goofy-khorana-tdnmow?fontsize=14&hidenavigation=1&theme=dark
ps: In the example, I left the button in the component, but ideally it would be used where it is being called.
Add data-bs-toggle="modal" data-bs-target="#example-modal-sizes-title-sm" attributes to the button on which if clicked, modal should activate.
This is my html code of bootstrap Modal
<div className="modal fade" id="navSearchModal" tabIndex="-1" aria-labelledby="navSearchModalLabel" aria-hidden="true">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-body">
<button type="button" className="ms-auto rounded-circle modal-close-btn" data-bs-dismiss="modal" aria-label="Close">
<i className="fa-solid fa-xmark"></i>
</button>
<h5 className="modal-title text-center" id="navSearchModalLabel">Search for Products</h5>
<input className="navbar-search-input my-3 w-100 px-2 py-2 rounded-pill" type="text" placeholder="Search..." />
<div className='search-modal-results'></div>
</div>
</div>
</div>
</div>
and this is the button which when click activates the modal
<button className="navbar-search-btn" type="submit" data-bs-toggle="modal" data-bs-target="#navSearchModal">
<i className="fa-solid fa-magnifying-glass"></i>
</button>
Here is my Search.js component.
class Search extends Component {
state = {
doctors: [],
showTab: false
}
openTab = () => {
this.setState({showTab: true});
console.log('openTab state', this.state);
}
render() {
let advancedSearch = null;
if (this.state.showTab===true) {
advancedSearch = (<AdvancedSearch />)
}
return (
<div class="row">
<div class="col-md-2">
<div class="form-group">
<button class="btn btn-md btn-primary" data-toggle="modal" data-target="#myModal" onClick={this.openTab}>Advanced Search</button>
</div>
</div>
{advancedSearch}
</div>
)
}
}
And this is my Advanced Search component. No need to look at the code in depth.
const advancedSearch = (props) => {
return (
<div class="modal inmodal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content animated bounceInRight">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title"> Advanced Search <i class="fa fa-search"></i> </h4>
</div>
<div class="modal-body">
<div class="row">
{searchFieldsInner.map((field, idx) => (
<SearchField
key={idx}
colWidth={field.colWidth}
placeholder={field.placeholder}
formControl={field.formControl} />
))}
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Search</button>
</div>
</div>
</div>
</div>
)
Basically, when I click on the advancedSearch, I want the state to turn to true, which I am doing with the if statement. However, once the component opens (basically a pop-up view that slides down), and when I click on the background after which the pop-up closes, I want to turn the showTab state to false. Any suggestions on how to do it?
Advance search should be opened anyway as it needs to be clicked. The things you should control is the content inside advance search. Therefore, the state should be passed into AdvanceSearch as props.
//Search.js
closeTab = () => {
this.setState({showTab: false});
console.log('closeTab state', this.state.showTab);
}
render() {
return (
<div class="row">
<div class="col-md-2" onClick={this.closeTab}>
//skipped code
</div>
<AdvancedSearch isOpen={this.state.showTab} onClick={this.openTab}/>
</div>
)
}
//advanceSearch.js
const advancedSearch = ({isOpen, open}) => {
return (
{isOpen && (
<div class="modal inmodal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
//skipped code
</div>
</div>
</div>
)}
)
I have a problem with editing bootstrap forms. I set a default and a placeholder value via js.
Now when the user is trying to change the value of the textfield, he can't.
Here is the code for my modal.
getData(){
//gets data from our api and replaces the values of the inputfields down below
}
render() {
this.getData();
return(
<div class="modal fade" id="ChangePwModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ChangePwModalModalLabel">Nutzer Details</h5>
<button type="button" id="PwModalClose" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form onSubmit={this.persDaten}>
<div className="input-group" id="inputgroop_changeemail">
<input type="text" className="form-control" id="neuesPw" name="dozMail" value= {getCookie("user")} required></input>
</div>
<div class="form-row" id="changename">
<div class="col">
<input type="text" id="VornameDoz" class="form-control" name="dozVorname" placeholder="Vorname"></input>
</div>
<div class="col">
<input type="text" id="NachnameDoz" class="form-control" name="dozNachname" placeholder="Nachname"></input>
</div>
</div>
<button className="btn btn-danger d-flex justify-content-center" type="submit" id="modalbuttonsredpd">
Pesönliche Daten ändern
</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Abbrechen</button>
</div>
</div>
</div>
</div>
);
}
};
export default ChangePwModal;
Thanks a lot.
My guess is that somewhere here... there is an onChange Event... which is triggering the change of state when something changes the textfield... With the way react works, if you change the state, it will causes a RERENDER ... which means that it will call the render() function again... as well as the "getData()" which will change the textfield again to what it was originally was. My recommendation is to put this.getData(); NOT IN THE render() function, but rather, put it in the componentDidMount()
{individual && individual.map((el)=>{
return (
UnSubscribe
<div id="responsive-modal" className="modal fade emp-add-list" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style={{display: "none"}}>
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-body">
<div className="form-group">
<div className="checkbox">
<button type="button" className="btn btn-danger" onClick={this.withdrawPlan.bind(this, el)}>Withdraw Plan</button>
</div>
</div>
</div>
</div>
</div>
</div>
)
})
}
withdrawPlan(el){
let data = {
subscription_plan_id: 'SP5bd18b12b144f81f341a72ed',
reason: this.state.withdrawl_reason
}
UserAction._planWithdrawl(data);
}
I am having a button to unsubscribe from unsubscribe i can get all the el data, how to access that el data in the modal, on click of withdrawplan I need to access the el data.
If i am understanding it correctly.
Firstly why are you having method in template?
You dont need anchor tag. you can have data in modal via function
<button href="#" data-toggle="modal" data-target="#responsive-modal" onClick={()=>this.myFunction(el)} className="btn btn-success waves-effect waves-light m-t-20">UnSubscribe</button>
In my function save the data in state and trigger the modal from there. Your state should be like
this.state = {
enableModal: false,
data: null
}