0

I am working on a demo in which the client has a modal box which display is set to none. When I click on the CTA button fadein and fadeout classes are applied, and display:none changes to display:block for 3-4 sec and then display:block is turned back into display:none I want to remove toggle display:none to display:block and remove the fadein and fadeout classes.

Is there a way I can use the console to remove the display toggle as well as removed classes using javascript

Edit: I have uploaded the DOM changes which I want to remove.

enter image description here

localhost
  • 822
  • 2
  • 20
  • 51
  • What does "_I do not have access to the source code_" exactly means? How did you think to override the effect? Are you working with an extension? Via the console? Something else? – Teemu Feb 21 '22 at 06:33
  • When you say 'all happening inline' do you you mean they aren't using CSS animation but only transform? Please show us the code you want to affect (the HTML and any relevant CSS). – A Haworth Feb 21 '22 at 07:44
  • @AHaworth I have edited my question to add detail, inline means it is added and removed from div as its attributes. – localhost Feb 21 '22 at 10:44
  • @Teemu I do not have source code means, I do not have code to go and edit, hence I am applying my changes temporary – localhost Feb 21 '22 at 10:45
  • You need to show us what CSS is being applied (before you get to it). Are they using an animation for example? – A Haworth Feb 21 '22 at 10:51
  • @AHaworth I don't have CSS code, that is only CSS I got from the inspector, and after that `display: none` is applied. I mentioned in the question that I do not have source code. – localhost Feb 21 '22 at 11:15
  • Sorry, I don't understand. I realise you dont' have, and are not allowed I assume, to change the actual source file, but using your browser's devtools inspect facility you can see exactly what is adding that display and other CSS. My suspicion is that they are running a CSS animation not just a transform. – A Haworth Feb 21 '22 at 11:17
  • @AHaworth I have updated question to reflect more – localhost Feb 27 '22 at 18:48
  • Is there a reason you cannot show us the CSS? You should be able to copy it in your browsers dev tools. – A Haworth Feb 27 '22 at 19:48
  • @AHaworth I have uploaded screencast of DOM changes which I am asking to override – localhost Feb 27 '22 at 21:16

7 Answers7

1

I suggest you try !important rule in css

Mersan Canonigo
  • 64
  • 1
  • 9
  • But as the classes are injected onto HTML, doesn't that mean they have more precedence than writing `!important` in external CSS file? – localhost Feb 21 '22 at 06:31
  • @localhost this article on CSS specificity might be worth a read: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity – micahlt Mar 01 '22 at 21:57
  • CSS properties set on `element.style` objects do not take part in the cascade and take precedence over rules for the same property provided in a style sheet. The OP shows `display: none` as being set on an element's `style` object. See also [this answer](https://stackoverflow.com/a/11151859/5217142) – traktor Mar 03 '22 at 02:17
1

Developer Tools mastery is a vital part of my front-end toolkit. Even when you have the source code, there’s nothing better for learning how something works and debugging than being able to change things in real-time without reloading a page. Learn to love this stuff and it will love you back.

Modern browsers have Developer Tools. Safari may need toggling on and off.

Safari instructions for Developer Tools

Firefox, Chrome and Edge, I typically just right click on an element.

The 4-second limit seems long enough that I might just race against the clock, but if that doesn’t appeal to you, try event listener breakpoints which should work in Chrome and Edge, or Event Breakpoints in Firefox.

Once you see your modal pop up, you can right click on it and inspect that element in Developer Tools. It should then be trivial to find the element’s style and edit it to remove those values you don’t want.

You can then save the output style you’ve changed directly, removing the need for source code entirely. Chrome/Edge has a tool, while Firefox users tend to just copy/paste.

Extra Thoughts on Frameworks and Event Manipulation

It sounds like you may be inspecting a website with a framework as fadeIn/fadeOut classes only do things if they’re told to.

If that’s the case, you have lots of options. If you only care about the modals being visible then simply removing display: none; from fadeOut should work fine. Otherwise, you may want to step into the Developer Console and remove the event with JavaScript. I’d probably pair that with directly editing the modal to make it always display, or add a new event listener that adds display: block; or fadeIn without the corresponding timeOut call to fadeOut.

If you don’t care about breaking the overall functionality of fadeOut, removing the display attribute should work fine though.

smcjones
  • 5,490
  • 1
  • 23
  • 39
  • The problem is the code is minified, when I put event listener breakpoint, how can it be useful then? – localhost Mar 06 '22 at 14:27
  • Chromium browsers have a little curly bracket thing when viewing source code that allow you to prettify minified code. Even helpful with uglified code. Uglified code is just super tedious to read through. – smcjones Mar 06 '22 at 14:34
  • But you can easily clear all element events as I shared in my addendum. Then you don’t need to worry about the source code. – smcjones Mar 06 '22 at 14:35
  • [here](https://imgur.com/a/1S0C4JHhere) is what I got, and I don't know how to find that function) – localhost Mar 06 '22 at 14:49
  • Link doesn’t go anywhere. My link “remove the element with JavaScript” points to this code: `box.replaceWith(box.cloneNode(true))`. Another useful tip for Edge/Chrome: right click on an element’s HTML in the inspector to save a temp variable pointing to it. You can use that variable in place of `box`. – smcjones Mar 06 '22 at 15:01
  • Alternatively and if that doesn’t work, try to find the event listener https://stackoverflow.com/questions/18544306/how-to-use-geteventlisteners-in-chrome-dev-tool then remove it https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener – smcjones Mar 06 '22 at 15:11
  • Here is the link https://imgur.com/a/1S0C4JH, it is crucial to see the link as when I pretty code, it shows me code as such which I want to understand, why is it it showing like this. – localhost Mar 06 '22 at 16:08
0

Well, as some fellows already questioned is why you don't have the code of your customer. Id suggest to ask your customer to get source code to make helping you much easier and of course, helping your customer.

But, assuming that they apply their classes through JavaScript, you can use JavaScript keywords like .add, .remove or .toggle on your target

VebDav
  • 152
  • 6
0

Option 1 - Is the one mentioned by @Mersan Canonigo (!important rule should work just fine - you can use this to overwrite whatever css you want to overwrite).

Applying !important to the property value of any selector makes it the value that will be applied to the element. This happens regardless of the rank of the selector on the Specificity hierarchy. So basically even if you specify it to a type or pseudo-element it would still overwrite the inline styling.

However I recommend you to use this with extreme caution since when overused it might also cause big styling problems. This should be used as a last resort, and while in your case the use of !important rule is justified, you should make sure you create a special class for this and use it only for this purpose (so you don't get unexpected behavior from it).

Here is a nice article about css specificity that covers !important rule as well.

Observation: This approach depends a lot on fadein and fadeout classes (it might be pretty complicated if those are hard to re-write and if there are to many props is probably not worth it).

Option 2 - by getting a reference of the element you can remove a class using classList and edit the style (display: none) using HTMLElement.style .

You can get the element with Document.getElementsByClassName(). If that is too generic (and you have more more elements with same class) you can use this question to guide you to make it more specific.

However if this classes are added from js (onclick) you need to prevent that from your js. So basically get a reference from that element and overwrite the onclick method yourself.

Berci
  • 2,876
  • 1
  • 18
  • 28
0

Just add !important before the ; on the lines you want (in the CSS).

Ninja Coder Tech
  • 31
  • 3
0

Hacking DOM events with console? Hang in there man!

Jokes aside if you really don't see other way out of this and for some reason console is the only option to remove the behavior that changes the classes on your element you could simply replace the node of that element with exact copy. By doing this you would automatically drop all event listeners that were attached to it. Here's a snippet you can paste into your console:

const oldElement = $0;
const newElement = oldElement.cloneNode(true);
oldElement.parentNode.replaceChild(newElement, oldElement);

Since we're in the developer tools you can use $0 reference to select the element you need in the elements tab. Just be sure to select it manually yourself.

Selecting element in Elements tab in dev tools

Dharman
  • 30,962
  • 25
  • 85
  • 135
adamr
  • 202
  • 2
  • 6
0

try this. add !important to that class using addClass function of javascript. I think it will work well for you.

SmallBaby
  • 1
  • 2
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 06 '22 at 12:20