Dim Background on Modal Display
See original GitHub issueDescription
Expected default behavior of modals on mobile devices, is that on dispaly of the modal, the background page dims. Currently, the transparent property of the Modal component sets the background to either transparent or white. It would make more sense to have 3 options for background: transparent, white or rgba(0,0,0,0.5) - dim.
Reproduction
Default behavior of modal transparent property.
Solution
I was able to change the code that when transparent is false, it dims the background. However, it would be more correct to allow the user to select from a wider range of options.
backgroundColor: this.props.transparent ? 'transparent' : 'rgba(0,0,0,0.5)',
Dim Background on Modal Display
Additional Information
- React Native version: Latest
- Platform: Android
- Operating System: MacOS
Issue Analytics
- State:
- Created 7 years ago
- Reactions:3
- Comments:5 (2 by maintainers)
Top Results From Across the Web
Dim background screen when modal popup opens
I have a modal popup that opens on a button click. I am trying to dim the background when the popup open but...
Read more >Simple Modal Window With Background Blur Effect - CSS Script
A simple, lightweight vanilla JavaScript library that lets you create a modal window while blurring the background content to focus your ...
Read more >How To Use Opacity and Transparency to Create a Modal in ...
When styling HTML with CSS, opacity can help soften a shadow, de-emphasize non-essential content during a specific task, or fade content in ...
Read more >blur modal background css - CodePen
CSS (SCSS) ; 1 .firstBlur, .secondBlur, .imgBlur { ; 2. margin:50px 20px 0; ; 3. border: solid 1px black; ; 4. padding:20px; ;...
Read more >Modal Options - W3Schools Tryit Editor
The backdrop option specifies whether the modal should have a dark overlay (the background color of the current page) or not. Modal with...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I think it should be opened, it’s weird not to have this feature.
Please open a new issue.