Mixing
how to mask/disable the whole page regardelss of what componenets are inside
I know how to disable components separately, for instance how to do it for an <input /> or a <button />.
But I need something else, at some points in my app (for instance while I'm loading some stuff) I need the whole page to be masked so that nothing will work no clicking no typing nothing and if the color gets blurred that's even better.
AS I mentioned I can do that for all components separately but I need something that regardless of what is in the page just mask/disable all the page till my loading is done and i turn it back.
I tried <fieldset disabled> but it doesn't do it for the whole page, for instance buttons.
reactjs
asked Nov 19 '18 at 15:47
farm command
6719
add a comment |
I know how to disable components separately, for instance how to do it for an <input /> or a <button />.
But I need something else, at some points in my app (for instance while I'm loading some stuff) I need the whole page to be masked so that nothing will work no clicking no typing nothing and if the color gets blurred that's even better.
AS I mentioned I can do that for all components separately but I need something that regardless of what is in the page just mask/disable all the page till my loading is done and i turn it back.
I tried <fieldset disabled> but it doesn't do it for the whole page, for instance buttons.
reactjs
asked Nov 19 '18 at 15:47
farm command
6719
The way I achieved this was by having an 'enabled' state property in my controlling class. This 'enable' state property is switched whilst loading takes place. I also pass 'enabled' to each of the components for the page. In each component, I handle the enabled value as appropriate. As I use setState for 'enabled' in the controlling class, each update is passed to each child component.
– Chris Adams
Nov 19 '18 at 15:54
@ChrisAdams thanks but you say ` I also pass 'enabled' to each of the components ` as i mentioned i need to be done regardless of the children so something that i add to the main tag for instance the main div and then it masked the whole page
– farm command
Nov 19 '18 at 15:58
add a comment |
I know how to disable components separately, for instance how to do it for an <input /> or a <button />.
But I need something else, at some points in my app (for instance while I'm loading some stuff) I need the whole page to be masked so that nothing will work no clicking no typing nothing and if the color gets blurred that's even better.
AS I mentioned I can do that for all components separately but I need something that regardless of what is in the page just mask/disable all the page till my loading is done and i turn it back.
I tried <fieldset disabled> but it doesn't do it for the whole page, for instance buttons.
reactjs
asked Nov 19 '18 at 15:47
farm command
6719
I know how to disable components separately, for instance how to do it for an <input /> or a <button />.
But I need something else, at some points in my app (for instance while I'm loading some stuff) I need the whole page to be masked so that nothing will work no clicking no typing nothing and if the color gets blurred that's even better.
AS I mentioned I can do that for all components separately but I need something that regardless of what is in the page just mask/disable all the page till my loading is done and i turn it back.
I tried <fieldset disabled> but it doesn't do it for the whole page, for instance buttons.
reactjs
reactjs
asked Nov 19 '18 at 15:47
farm command
6719
asked Nov 19 '18 at 15:47
farm command
6719
asked Nov 19 '18 at 15:47
farm command
6719
asked Nov 19 '18 at 15:47
farm command
6719
asked Nov 19 '18 at 15:47
farm command
6719
6719
The way I achieved this was by having an 'enabled' state property in my controlling class. This 'enable' state property is switched whilst loading takes place. I also pass 'enabled' to each of the components for the page. In each component, I handle the enabled value as appropriate. As I use setState for 'enabled' in the controlling class, each update is passed to each child component.
– Chris Adams
Nov 19 '18 at 15:54
@ChrisAdams thanks but you say ` I also pass 'enabled' to each of the components ` as i mentioned i need to be done regardless of the children so something that i add to the main tag for instance the main div and then it masked the whole page
– farm command
Nov 19 '18 at 15:58
add a comment |
The way I achieved this was by having an 'enabled' state property in my controlling class. This 'enable' state property is switched whilst loading takes place. I also pass 'enabled' to each of the components for the page. In each component, I handle the enabled value as appropriate. As I use setState for 'enabled' in the controlling class, each update is passed to each child component.
– Chris Adams
Nov 19 '18 at 15:54
@ChrisAdams thanks but you say ` I also pass 'enabled' to each of the components ` as i mentioned i need to be done regardless of the children so something that i add to the main tag for instance the main div and then it masked the whole page
– farm command
Nov 19 '18 at 15:58
The way I achieved this was by having an 'enabled' state property in my controlling class. This 'enable' state property is switched whilst loading takes place. I also pass 'enabled' to each of the components for the page. In each component, I handle the enabled value as appropriate. As I use setState for 'enabled' in the controlling class, each update is passed to each child component.
– Chris Adams
Nov 19 '18 at 15:54
The way I achieved this was by having an 'enabled' state property in my controlling class. This 'enable' state property is switched whilst loading takes place. I also pass 'enabled' to each of the components for the page. In each component, I handle the enabled value as appropriate. As I use setState for 'enabled' in the controlling class, each update is passed to each child component.
– Chris Adams
Nov 19 '18 at 15:54
@ChrisAdams thanks but you say ` I also pass 'enabled' to each of the components ` as i mentioned i need to be done regardless of the children so something that i add to the main tag for instance the main div and then it masked the whole page
– farm command
Nov 19 '18 at 15:58
@ChrisAdams thanks but you say ` I also pass 'enabled' to each of the components ` as i mentioned i need to be done regardless of the children so something that i add to the main tag for instance the main div and then it masked the whole page
– farm command
Nov 19 '18 at 15:58
add a comment |
1 Answer
1
active
oldest
votes
All I needed to do was to set style={{ pointerEvents: 'none' }} and then when the load is done change it to auto
answered Nov 19 '18 at 16:51
farm command
6719
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53378203%2fhow-to-mask-disable-the-whole-page-regardelss-of-what-componenets-are-inside%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
All I needed to do was to set style={{ pointerEvents: 'none' }} and then when the load is done change it to auto
answered Nov 19 '18 at 16:51
farm command
6719
add a comment |
All I needed to do was to set style={{ pointerEvents: 'none' }} and then when the load is done change it to auto
answered Nov 19 '18 at 16:51
farm command
6719
add a comment |
All I needed to do was to set style={{ pointerEvents: 'none' }} and then when the load is done change it to auto
answered Nov 19 '18 at 16:51
farm command
6719
All I needed to do was to set style={{ pointerEvents: 'none' }} and then when the load is done change it to auto
answered Nov 19 '18 at 16:51
farm command
6719
answered Nov 19 '18 at 16:51
farm command
6719
answered Nov 19 '18 at 16:51
farm command
6719
answered Nov 19 '18 at 16:51
farm command
6719
6719
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53378203%2fhow-to-mask-disable-the-whole-page-regardelss-of-what-componenets-are-inside%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
The way I achieved this was by having an 'enabled' state property in my controlling class. This 'enable' state property is switched whilst loading takes place. I also pass 'enabled' to each of the components for the page. In each component, I handle the enabled value as appropriate. As I use setState for 'enabled' in the controlling class, each update is passed to each child component.
– Chris Adams
Nov 19 '18 at 15:54
@ChrisAdams thanks but you say ` I also pass 'enabled' to each of the components ` as i mentioned i need to be done regardless of the children so something that i add to the main tag for instance the main div and then it masked the whole page
– farm command
Nov 19 '18 at 15:58