So I've added modal to my project. Now I've added it with installing a package called react-modal.
Everything works great, I just can't make it transparent.
When users get on a single article page, if he wants, on a click a button opens a modal with a form. Now I want to keep the form box centered, everything else transparent(so a user can see the background).
Now react-modal uses customStyles and I've tried adding into it backgroundColor: 'rgba(0, 0, 0, 0.5)' and few other backgroundColor but nothing really worked. I've also tried adding transparent={true} into the <Modal /> but that doesn't work.
Here where I use modal:
import Modal from 'react-modal';
Modal.setAppElement('#root');
const customStyles = {
content: {
top: '50%',
left: '50%',
right: 'auto',
bottom: 'auto',
marginRight: '-50%',
transform: 'translate(-50%, -50%)',
},
};
<Modal
isOpen={isOpen}
onRequestClose={toogleModal}
style={customStyles}
transparent={true}
contentLabel='Forma'
>
And here is a picture when the modal is open:
It's only saying that u need to register first, and if u have an account it opens a form.
So is it even possible to make it transparent? I want to keep just this box with an outline, and everything that is white, to make it transparent so users can see the background page.
Thanks!
It looks to me like the styling was done by something else that you set earlier (or from other styling library). Can you post more code of the content: the one with the "Please register first"? Also you can try opacity: '50%' (or whatever percent you want).
Related
I'm not sure if there's some quirk with react-bootstrap's DropdownButtons, but when I try to style the dropdown button like so:
<DropdownButton
key={index}
id="dropdown-basic-button"
title={
<div style={{
maxWidth: '250px',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap'
}}>
{url}
</div>
}
style={{margin: "auto", width: "100%", display: "block"}}
>
in order to try to get the button to fill its CSS grid cell completely, but it ends up looking something like this, clearly not filling its container:
I noticed in the chrome inspector, there are actual button components underneath this "DropdownButton" that, if I set the width of those to 100%, it achieves my goal. But, I don't know how to access these in code (see picture for reference).
You can see the div with my applied styles, but the <button type="button"...> component is what I really need to be editing. Is there a way to drill down into this and change its width?
I would like to hide an element at the top of the page, so that the user doesn't see it when the page loads.
He would then be able to see the element if he scrolls the page up.
I tried something like that using React (JSX)
<div
style={{
height: "10px",
backgroundColor: "#00ff00",
position: "relative",
top: 0,
}}
/>
Then I manually scroll the page using useEffect():
useEffect(() => {
window.scrollTo(0, 10)
}, [])
Unfortunately it doesn't work as expected
I want to ask how to display the Sample Title Bar in the Icon Window Max section only and this is my coding.
import React from 'react'
import { TitleBar } from 'react-desktop/windows';
export default function App() {
return (
<div style={{
display: 'block', width: 400, paddingLeft: 30
}}>
<h4>React Desktop Windows TitleBar Component</h4>
<TitleBar
title="Sample TitleBar"
controls
isMaximized="true"
background="orange"
/>
</div>
);
}
And want to show the Icon Window Max
before:
after:
Here is the code I got the link coding from: Link
As pert react desktop documentation they only provided support to hide/show all three control, there is no such specific prop which we can use to hide individual tool from title bar.
So if we want to hide the other two option apart from maximize we can use css and overwrite existing css in following way
.titlebar a[title="Close"],
.titlebar a[title="Minimize"] {
display: none !important;
}
I have given class to Titlebar component and hide element using css.
Codesandbox
I want something like this Here is the example!
I try with the material UI box, but it's not rendering the box only rendering the text.
Here is the code:
import * as React from 'react';
import Box from '#mui/material/Box';
export default function BreakpointsAsArray() {
return (
<div>
<Box sx={{ width: [100, 200, 300] }}>This box has a responsive width.</Box>
</div>
);
}
Material UI's Box name is quite deceptive and it doesn't mean a rectangle box will automatically be created in the rendered HTML. Here is some good explanation of the box component. You still need to add css/styling to make it according to your choice. The rectangle box you see in your shared image, is actually added (through some website code) to the better distinguish between the documentation text and the code snippet output. Anyhow, I forked the codesandbox example and added some custom styling to show, how the styling can be updated. You can use the sx prop to add any styles you needed. here is a little example.
sx={{
width: "90%",
padding: "24px 20px", // theme padding
border: "1px solid rgba(0, 0, 0, 0.12)",
borderRadius: 4
}}
OVERVIEW: I am using JQuery Colorbox to display a little loading icon when an order is being processed on my website. For a small percentage of users, the color box will not close by itself and just gets stuck. This is the basic concept:
The order page loads a link into the colorbox using:
$(document).ready(function () {
$("[rel=cbox_order]").colorbox({
initialWidth: "100",
initialHeight: "100",
innerWidth: "300",
innerHeight: "100",
iframe: true,
opacity: 0.75,
overlayClose: false,
title: 'Your order is being processed, please wait...',
onLoad: function () {
$('body').css({
overflow: 'hidden'
});
$('#cboxClose').remove();
$('#cboxLoadedContent').css({
'margin-bottom': '0px',
'height': '100%'
});
$(document).unbind("keydown.cbox_close");
},
onComplete: function () {
$('#cboxLoadingGraphic').show();
$('#cboxLoadedContent').css({
'margin-bottom': '0px',
'height': '100%'
});
},
onClosed: function () {
$('body').css({
overflow: 'auto'
});
}
});
$("[rel=cbox_order]").click(function () {
$("#colorbox").attr("style", "padding-bottom: 42px; padding-right: 42px; display: inline; width: 600px; height: 468px; top: 456px; left: 602px;");
});
});
<asp:HyperLink id="lnkConfirm" class="buttonlink" rel="cbox_order" NavigateURL="~/ProcessOrder/ProcessPayment.html" Text="CONFIRM ORDER" runat="server" />
This basically overrides lots of bits and STOPS the user closing the window whilst the order is being processed. The page that has been loaded into the ColorBox then processes the order and sends confirmation emails ect THEN does:
$(document).ready(function(){
window.top.location.href = '<%=Session["ProcessOrder_Redirect"].ToString()%>';
window.parent.$.fn.colorbox.close();
});
The idea is it redirects the parent window to the order confirmation page and then closes the box (just to confirm; this is working 95% of the time).
PROBLEM: This won't always work and I can't see why. I can confirm the value in the Session holds a valid URL. I entered an alert(<%=Session["ProcessOrder_Redirect"].ToString()%>); after the colorbox.close() and it appeared (and stayed there) for the users who get stuck with a valid URL. I cannot reproduce this error so I am somewhat stuck.
My only thoughts are that a. The redirect isn't working (currently awaiting on more info to confirm this) or B. the ColorBox is bugging out and just won't close.
Anyone able to help me solve this mystery?
EDIT: It seems it is the redirect messing up. Anyone know why that wouldn't always work.
Thanks
I ended up putting a manual link in place for the user to click if they got stuck. Seems to have sorted it for now but still don't know what caused the issue.