Is there a way to open a modal which will take entire screen just like in youtube video when you click on it's fullscreen it takes the entire screen view.
Right now this is what i have achieved so far
<Modal
title={false}
visible={visible}
footer={false}
centered
width="100vw"
onCancel={() => setVisible(false)}
>
<div style={{height: '100vh'}}>
some content
</div>
</Modal>
and this is how it looks like
i want it to look like this
With pure JavaScript you can do something like
const modal = document.querySelector('#myModalsClass')
modal.requestFullscreen()
If you look up the docs for the fullscreen API you will find other useful information about how to work with this.
If you're using React you need to use a ref to access the dom api
import React, { useRef } from "react";
const MyComponent = (props) => {
const myFullscreenComponent = useRef();
const openContentFullscreen = () => {
const element = myFullscreenComponent.current;
if (element && element.requestFullscreen) {
element.requestFullscreen();
}
};
return (
<div>
<button onClick={openContentFullscreen}>Full Screen</button>
<div className="modal" ref={myFullscreenComponent}>
content I want to be fullscreen
</div>
</div>
);
};
id recommend to use mui full-screen modal Here the link https://mui.com/material-ui/react-dialog/
let me know if you need any help
Check the following example
Note: set footer={null} if you want to hide OK and CANCEL buttons
App.js
import React, { useState } from 'react';
import 'antd/dist/antd.css';
import './index.css';
import { Button, Modal } from 'antd';
const App = () => {
const [visible, setVisible] = useState(false);
return (
<>
<Button type="primary" onClick={() => setVisible(true)}>
Open Full screen Modal
</Button>
<Modal
title="Full screen modal"
visible={visible}
//onOk={() => setVisible(false)}
onCancel={() => setVisible(false)}
footer={null} //If you want to hide OK and cancel buttons
>
<p>Full screen...</p>
<p>Full screen...</p>
<p>Full screen...</p>
<p>Full screen...</p>
<p>Full screen...</p>
</Modal>
</>
);
};
export default App;
index.css
.ant-modal,
.ant-modal-content {
height: 100vh;
width: 100vw;
top: 0;
margin: 0;
}
Screenshot
Demo
Related
Hello i'm trying to open a Modal upon NavDropdown.Item click that is inside a NavBar,
If I do something like this
import { useState } from "react";
import { rockPositions } from "../../constant/markers"
import { CloseButton, NavDropdown, Alert } from "react-bootstrap";
import Modal from 'react-modal/lib/components/Modal';
import { RouteBadge } from "../RouteBadge/RouteBadge";
import { RouteTable } from "../RouteTable/RouteTable";
import { modalStyle } from '../RockModalMarker/RockModalMarker.css.js';
const RockDropDownModal = (props) => {
const [isOpen, setIsOpen] = useState(false);
const route = props.route;
const rock = rockPositions.find(rockPosition => rockPosition.name === route.rock);
const index = props.rockIndex;
const toggleModal = (e) => {
setIsOpen(!isOpen);
};
if (!isOpen) {
return (
<NavDropdown.Item key={index} href="#rock" onClick={toggleModal}><span className={"rock-name-dropdown"}>{route.rock}</span>: {route.name}</NavDropdown.Item>
)
}
return (
<Modal key={index}
defaultStyles={modalStyle}
isOpen={isOpen}
onRequestClose={toggleModal}
centered
ariaHideApp={false}
>
<CloseButton variant="white" onClick={toggleModal} />
<Alert variant="primary" style={{ marginTop: "20px", backgroundColor: "#01579B", borderColor: "#0277BD" }}>
<Alert.Heading style={{ color: "#FFF" }}><p className="routeName">{rock.name}</p></Alert.Heading>
</Alert>
<RouteBadge rock={rock} />
<RouteTable rock={rock} />
</Modal>
)
}
export { RockDropDownModal };
the modal opens fine but it's behind the NavBar and if I close the navbar the modal closes too.
I was trying to close the navbar and only show the modal but and I wrap the dropdown item like this
<Navbar.Toggle>
<NavDropdown.Item key={index} href="#rock" onClick={toggleModal}><span className={"rock-name-dropdown"}>{route.rock}</span>: {route.name}</NavDropdown.Item>
</Navbar.Toggle>
it closes the Navbar but also the Modal.
In the screenshot here you can see the NavBar, when the selected item is clicked the Modal should open and the navbar close.
How can I prevent the Modal from closing?
If one of the main problems here is that the navbar overlaps the modal, have you tried setting the z-index of the modal to a greater value? This would set the modal above the navbar and upon closing the modal, it will also close the navbar as well.
In addition to this, try to play around with expanded property of Navbar. You could create a state inside Navbar
const [isExpanded, setIsExpanded] = useState(`default_boolean_value`)
<Navbar expanded={isExpanded}/>
where-in upon clicking a dropdown item inside the child component, you could set the state of the Navbar to expanded=false
here is the documentation, you can find expanded prop here https://react-bootstrap.github.io/components/navbar/
I'm trying to create a notifications area. I show a notification icon, and when the user clicks on it, I show the list of notifications.
Here's a codesandbox
The problem is that I can't mix it with ClickAwayListener.
When I use ClickAwayListener it's not shown at all.
How should I fix this?
HeaderAction.js
import Tooltip from "#material-ui/core/Tooltip";
import Fade from "#material-ui/core/Fade";
import Collapse from "#material-ui/core/Collapse";
import React, { useState } from "react";
import ClickAwayListener from "#material-ui/core/ClickAwayListener";
import Icon from "#material-ui/core/Icon";
const HeaderAction = ({ icon, title, component }) => {
const Component = component || (() => <div>NA</div>);
const [showComponent, setShowComponent] = useState(false);
const handleClick = () => {
setShowComponent(!showComponent);
};
return (
<>
<Tooltip title={title || ""}>
<div onClick={() => handleClick()}>
<Icon>{icon}</Icon>
</div>
</Tooltip>
{/* This part is not working */}
{/* <ClickAwayListener onClickAway={() => setShowComponent(false)}>
<div>
<Fade in={showComponent}>
<div>
<Component />
</div>
</Fade>
</div>
</ClickAwayListener> */}
<Fade in={showComponent}>
<div>
<Component />
</div>
</Fade>
</>
);
};
export { HeaderAction };
When you click the icon button, handleClick is called and the showComponent state is set to true, but then onClickAway from ClickAwayListener is also called and set the showComponent state to false again. The fix is simple, don't let the onClickAway handler execute by stopping the propagation after clicking the button:
<div
onClick={(e) => {
e.stopPropagation();
handleClick();
}}
>
I want to create a Modal variant with and set the default width and background color (among other things). I can't find documentation that says exactly how to do it, but I figured using variants would be the way to go.
I've put my best attempt on Code Sandbox here: https://codesandbox.io/s/vigilant-germain-u3mkx?
Any suggestions would be welcome.
Add baseStyle in the Modal component instead of variants
import {
ChakraProvider,
Modal,
extendTheme,
Button,
useDisclosure,
ModalOverlay,
ModalContent,
ModalHeader,
ModalFooter,
ModalCloseButton,
ModalBody
} from "#chakra-ui/react";
import "./styles.css";
const theme = extendTheme({
components: {
Modal: {
baseStyle: (props) => ({
dialog: {
maxWidth: ["95%", "95%", "95%"],
minWidth: "95%",
bg: "#00ff00"
}
})
}
}
});
export default function App() {
const { isOpen, onOpen, onClose } = useDisclosure();
return (
<ChakraProvider theme={theme}>
<Button onClick={onOpen}>Open Modal</Button>
<Modal isOpen={isOpen} onClose={onClose} variant="wide">
<ModalOverlay />
<ModalContent>
<ModalHeader>Modal Title</ModalHeader>
<ModalCloseButton />
<ModalBody>
<p>Test</p>
</ModalBody>
<ModalFooter>
<Button colorScheme="blue" mr={3} onClick={onClose}>
Close
</Button>
<Button variant="ghost">Secondary Action</Button>
</ModalFooter>
</ModalContent>
</Modal>
</ChakraProvider>
);
}
I am using Chakra UI to create a menu. I have something like this:
<Menu>
<MenuButton>hover over this</MenuButton>
<MenuList>
<Flex>To show/hide this</Flex>
</MenuList>
</Menu>
I am trying to dynamically open the tag on hover. The MenuList default is to open on user click. When I click on the button and then hover over it, my hover state works. I am trying to figure out a way so that the user does not have to click on the MenuButton for hovering over it to work.
Adding on to Bassem's answer. We can add onMouseEnter and onMouseLeave to the menu list so that it doesn't close when we leave the button.
import React from "react";
import {
Flex,
MenuItem,
Menu,
MenuButton,
MenuList,
Button,
useDisclosure
} from "#chakra-ui/react";
export default function App() {
const { isOpen, onOpen, onClose } = useDisclosure();
return (
<div className="App">
<Flex height="100vh" align="center" justifyContent="center" bg="gray.100">
<Menu isOpen={isOpen}>
<MenuButton
as={Button}
variant="solid"
colorScheme="teal"
onMouseEnter={onOpen}
onMouseLeave={onClose}
>
Hover Me
</MenuButton>
<MenuList onMouseEnter={onOpen} onMouseLeave={onClose}>
<MenuItem>Download</MenuItem>
<MenuItem>Create a Copy</MenuItem>
<MenuItem>Mark as Draft</MenuItem>
<MenuItem>Delete</MenuItem>
<MenuItem>Attend a Workshop</MenuItem>
</MenuList>
</Menu>
</Flex>
</div>
);
}
You can read more here https://www.coffeeclass.io/snippets/use-disclosure-menu-chakra-ui
For that you can use some event listeners: onMouseEnter & onMouseLeave together with useDisclosure hook that can be used to handle Menu open, close, and toggle.
import React from "react";
import {
Flex,
MenuItem,
Menu,
MenuButton,
MenuList,
Button,
useDisclosure
} from "#chakra-ui/react";
export default function App() {
const { isOpen, onOpen, onClose } = useDisclosure();
return (
<div className="App">
<Flex height="100vh" align="center" justifyContent="center" bg="gray.100">
<Menu isOpen={isOpen}>
<MenuButton
as={Button}
variant="solid"
colorScheme="teal"
onMouseEnter={onOpen}
onMouseLeave={onClose}
>
Hover Me
</MenuButton>
<MenuList>
<MenuItem>Download</MenuItem>
<MenuItem>Create a Copy</MenuItem>
<MenuItem>Mark as Draft</MenuItem>
<MenuItem>Delete</MenuItem>
<MenuItem>Attend a Workshop</MenuItem>
</MenuList>
</Menu>
</Flex>
</div>
);
}
And here is a working CodeSandbox.
import React, { useRef, useState } from "react";
import { Menu, MenuButton, MenuItem, MenuList } from "#chakra-ui/menu";
import { Button } from "#chakra-ui/button";
// TODO: dynamic button text and items
const PopupNavItem = () => {
const timerRef = useRef();
const [isOpenMenu, setIsOpenMenu] = useState(false);
// menu list pops up automatically when cursor hovers over the button，
const btnMouseEnterEvent = () => {
setIsOpenMenu(true);
};
//,and vice versa，
const btnMouseLeaveEvent = () => {
// async
timerRef.current = window.setTimeout(() => {
setIsOpenMenu(false);
}, 150);
};
// when the cursor moves away from the button but entering the menu list,the menu list stays open
const menuListMouseEnterEvent = () => {
// when entered, the timer has been cleared
clearTimeout(timerRef.current);
timerRef.current = undefined;
setIsOpenMenu(true);
};
// finally, when the cursor moves away from the menu list, menu list closes
const menuListMouseLeaveEvent = () => {
setIsOpenMenu(false);
};
return (
<Menu isOpen={isOpenMenu} id={1}>
<MenuButton
as={Button}
variant="solid"
colorScheme="teal"
onMouseEnter={btnMouseEnterEvent}
onMouseLeave={btnMouseLeaveEvent}
>
Hover Me
</MenuButton>
<MenuList
onMouseEnter={menuListMouseEnterEvent}
onMouseLeave={menuListMouseLeaveEvent}
>
<MenuItem>Download</MenuItem>
<MenuItem>Create a Copy</MenuItem>
<MenuItem>Mark as Draft</MenuItem>
<MenuItem>Delete</MenuItem>
<MenuItem>Attend a Workshop</MenuItem>
</MenuList>
</Menu>
);
};
export default PopupNavItem;
For anyone having a hard time with hover rather than click, maybe you can try this one
Here I have my modal component. I am making an app that I want a button to open this modal that I use in multiple places like opening a preview or deleting options.
import React from 'react';
import ReactDOM from 'react-dom';
import { CSSTransition } from 'react-transition-group';
import Backdrop from '../Backdrop/Backdrop';
import '../Modal/Modal.css';
const ModalOverlay = (props) => {
const content = (
<div className={`modal ${props.className}`} style={props.style}>
<header className={`modal__header ${props.headerClass}`}>
<h2>{props.header}</h2>
</header>
<form
onSubmit={
props.onSubmit ? props.onSubmit : (event) => event.preventDefault()
}
>
<div className={`modal__content ${props.contentClass}`}>
{props.children}
</div>
<footer className={`modal__footer ${props.footerClass}`}>
{props.footer}
</footer>
</form>
</div>
);
return ReactDOM.createPortal(content, document.getElementById('modal-hook'));
};
const Modal = (props) => {
return (
<React.Fragment>
{props.show && <Backdrop onClick={props.onCancel} />}
<CSSTransition
in={props.show}
mountOnEnter
unmountOnExit
timeout={200}
classNames="modal"
>
<ModalOverlay {...props} />
</CSSTransition>
</React.Fragment>
);
};
export default Modal;
And here I use this modal for showing up deleting options.
const DocumentItem = (props) => {
const [showConfirmModal, setShowConfirmModal] = useState(false);
const showDeleteWarningHandler = () => {
setShowConfirmModal(true);
};
const calcelDeleteHandler = () => {
setShowConfirmModal(false);
};
const confirmDeleteHandler = () => {
setShowConfirmModal(false);
console.log('Delete!');
};
return (
<React.Fragment>
<Modal
show={showConfirmModal}
onCancel={calcelDeleteHandler}
header="Are you sure?"
footerClass="document-item__modal-actions"
footer={
<React.Fragment>
<Button inverse onClick={calcelDeleteHandler}>
CANCEL
</Button>
<Button danger onClick={confirmDeleteHandler}>
DELETE
</Button>
</React.Fragment>
}
>
<p>
Do you want to proceed and delete this document? Please note that it
can't be undone thereafter.
</p>
</Modal>
</React.Fragment>
);
};
I don't understand why my screen goes all black, transparent but my modal doesn't show.
How can I fix this problem?