How to darken the background without affecting the modal window?

HTML & CSS
1

I tried many options but it always darkens everything, the index doesn’t help

2

Darken WHICH background? You’ve got the modal background set to black. You can’t get any darker than that…or do you want to darken the “non-modal” content?

3

I want to darken this .header

4

Before we delve too far down the rabbit hole, can I ask why you’re not using the dialog element?

It’s been supported for at least three years by every major browser and handles a lot of the nuances of it for you. You don’t need all the fixed garbage (which takes it out of the DOM document flow and is much harder to deal with), and the background can be handled with the ::backdrop pseudo-element.

I understand this might be something new, but if it makes your life easier :person_shrugging:

5

For me this is too much information, but I want everything simple and clear, I don’t understand how to insert this dialogue into my code, as I understand it, again there should be the most basic, the most difficult)))

6

dialog IS dead simple. You should only need one line to open it using the showModal

I was trying to work up a sample for you, but I can’t make heads or tails of your structure. It SHOULD be as simple as changing the div you’re currently toggling to a dialog element, but you’ve got some weird structure to your code which is breaking it and I can’t figure it out at the moment.

I’ll try it again later. I’m busy doing work at the moment. I’m sure someone else can hop in if I don’t get to it sooner.

7

I have a header class with content, I need to darken or blur it, but another class header__top-row–mobile is added to it via a togger; this is the model window, it should remain unchanged,

8

Here’s a REAL quick and dirty rework. I changed the background color to green to make it easier to see…

But I would suggest really taking a good look at your markup.

  • If something is 100% height, it’s not a header
  • You’re suffering from div-itis. You’ve got more divs than you need. Less is more, so use only the divs you need to accomplish the look you’re going for.
  • You’re also suffering from flex-itis. Using flex with direction column without spreading the content out is basically display block, the default, so get rid of those.

2 Likes
9

Typo alert :slight_smile:

  </dislog>
10

:stuck_out_tongue_closed_eyes: :stuck_out_tongue_winking_eye: :stuck_out_tongue_closed_eyes: :stuck_out_tongue_winking_eye:

(fixed)

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.