Full Screen CSS Modal

The times that I removed 100% width, the modal only shows on mobile in the horizontal middle of screen centered. I’ll test more soon. How can I add (#modal-toggle-2) to the above javascript? :sunglasses:

In the dialog CSS, without overflow-y auto, or scroll, the text / image modal Doesn’t scroll. The Only other overflow in the modal CSS is below. That helps to show only the modal scroll bar. :grinning:

.stop-scroll {
  overflow: hidden;
}

How can I add (#modal-toggle-2) to the above javascript? :sunglasses:

I re did that modal. I finally found CSS that hides the body scrollbar when the modals are open! The body is even hidden when modals are open, and the page actually scrolls when the modals are closed! :sunglasses:

html,
body {
  /* Firefox */
  scrollbar-width: none;
  /* IE 10+ */
  -ms-overflow-style: none;
}

/* WebKit - Safari, Chrome, Opera */
body::-webkit-scrollbar {
  width: 0;
  height: 0;
}

I like the way the modals open / close, scroll, etc.! However, with one page smooth scroll templates, I’d rather Cover the Fixed Header so visitors Don’t scroll the page when the modals are still open. How can the modals Cover the Fixed Header? Thanks! :sunglasses:

Code Pen . io /FavorMan/pen/raBPbyL

I Moved the modal (z-index) from (.arc-modals .modal-dialog) to (.arc-modals .modal-dialog:target). Now I Finally have Great full screen modals! :sunglasses:

Actually, on CodePen, the modals Fully Covers the whole body. However, on my editing site, the fixed header still shows. I’m sure that somebody has the solution! :sunglasses:

Check out my Newest thread. That has a Different code. I’m Near to what I want! :sunglasses:

Check out my Newest thread. I’m Near to what I want! :sunglasses:

Please one make one thread per project

I created a pen with one of the templates that the modal Doesn’t cover the page fixed navbar. The menu Doesn’t run properly on C P. However, the pen should help people on here figure out how I can get the modal to cover that fixed navbar. :sunglasses:

CodePen .io /FavorMan/ pen/ yyBWOva

I wouldn’t suggest creating your modals the way you are, it is bound to cause issues. I’m sure you can find tons of modal examples that use very little JS. Use the dialog element and buttons. Add some JS to handle the interactions.


You have to be mindful of the source order and what elements are parents, siblings, and children. The parent of the modal is the sibling of the fix nav that is on top of it, so that element needs a higher z-index or the nav should have a lower.

Without changing the structure, using the :has() selector should work.

body:has(.modal-dialog:target) .navigation-bar {
  z-index: 0;
}

Or targeting the parent

body:has(.modal-dialog:target) #page-hero {
  position: relative;
  z-index: 10;
}

Your modal close button shouldn’t be full width, otherwise it will cover the modal content when you scroll. Remove the left and width properties from its selector.

Thanks lasjorg! The 2 body:has CSS helped the modals to cover the page fixed header! I plan to use top one. I’m seeing a (Expected RPAREN Error). How can I Remove that Error?

Should I keep the 2 other z-index that I already had?

Do you know how I can Prevent the page from showing after the modal is done scrolling?

Also, due to the fix, I changed the shut button to (top: 0). :sunglasses:

  1. I don’t know what that error is, but the browser must support the :has() selector and it is fairly new.

  2. Not really, if the nav has 0 for its z-index the modal is after it in the source order so it should be on top of it. But it doesn’t hurt to have it unless it is interfering with something else.

  3. Add overscroll-behavior: contain; to .modal-dialog

  4. But it is still full width, which makes it cover the content when you scroll.

I want the (X) to stay Fixed on top. :slight_smile:

overscroll-behavior: contain; Stopped the body from showing when the modals are open! On a Different template, there was also sticky like activity that showed on top of the shut bar when modal scrolling. That’s also Solved! Thanks! :sunglasses:

Any idea how I can get the navbar menu to open on CodePen? :sunglasses:

A close button should be the size of its content, which is just an X in this case. I don’t know why you would want it to cover the modal content when the modal is scrolled.

I assume there is some JavaScript code missing for the nav.

What I have is likely foreign to CodePen. I made the fixed (X) area 25px. So, that Doesn’t take a lot of room.

CodePen is fussy about having “actual” links.

<li class="menu-item has-submenu-OFF"><a tabindex="0">ABOUT US +</a>

The smaller screens navbar Doesn’t fully close when smooth scrolling. I looked up a Number of scripts to help. No success yet. :grinning:

Actually, on Firefox, the other template is showing the modals as in the screenshot on windows and android. Otherwise, I Like this.
:sunglasses:

Now I noticed that Brave mobile also shows some of the page header on top of the modals. :upside_down_face: