Modal Fixed!!!

enrico 2020-01-14 20:37:37 +01:00
parent edfbf242f0
commit 1a31ace453
3 changed files with 8 additions and 15 deletions

View File

@ -1,4 +1,4 @@
.videoPlayer { .VideoPlayer {
width: 100%; width: 100%;
height: 250px; height: 250px;
background-color: black; background-color: black;

View File

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js'; import 'bootstrap/dist/js/bootstrap.min.js';
import Button from './Buttons'; import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal'; import Modal from 'react-bootstrap/Modal';
import './Buttons.css'; import './Buttons.css';
import './ModalButton.css'; import './ModalButton.css';
@ -11,16 +11,17 @@ function ModalButton() {
const handleClose = () => setShow(false); const handleClose = () => setShow(false);
const handleShow = () => setShow(true); const handleShow = () => setShow(true);
return ( return (
<> <>
<Button className="btn1" name="view" onClick={handleShow} /> <Button className="btn1" onClick={handleShow} lhref="#">View</Button>
<Modal show={show} onHide={handleClose}> <Modal show={show} onHide={handleClose}>
<Modal.Header closeButton> <Modal.Header closeButton>
<Modal.Title>Card Title</Modal.Title> <Modal.Title>Card Title</Modal.Title>
</Modal.Header> </Modal.Header>
<Modal.Body> <Modal.Body>
<VideoPlayer /> <div className="VideoPlayer"></div>
Some quick example text to build on the card title and make up the bulk of the card's content. Some quick example text to build on the card title and make up the bulk of the card's content.
</Modal.Body> </Modal.Body>
</Modal> </Modal>
@ -28,12 +29,4 @@ function ModalButton() {
); );
} }
class VideoPlayer extends React.Component {
render() {
return (
<div className="videoPlayer"></div>
);
}
}
export default ModalButton; export default ModalButton;

View File

@ -23,9 +23,9 @@ class Navbar extends React.Component {
<NavButton name="Giochi" lhref="/Giochi" /> <NavButton name="Giochi" lhref="/Giochi" />
<NavButton name="Programmi" lhref="/Programmi" /> <NavButton name="Programmi" lhref="/Programmi" />
</ul> </ul>
<form class="form-inline my-2 my-lg-0"> <form className="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" /> <input className="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
<button class="btn1" type="submit">Search</button> <button className="btn1" type="submit">Search</button>
</form> </form>
</div> </div>
</nav> </nav>