Member Avatar for schumaj

I need help I am much to new at CSS

this is the web page. www.rybabaseball.org

I just need it to where when you trigger the calander event and make it expand the rest of the webpage fades out to black or something

And you do have to be in IE, for it to work, I was disappointed to find out CSS and Dhtml doesn't like Firefox all that well

  • 3 Contributors
  • 3 Replies
  • 111 Views
  • 16 Hours Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

A simple, robust way to dim the page when a calendar item expands is to add a full‑screen overlay that fades in/out and sits beneath the expanded calendar panel. This keeps layout changes minimal and works in modern browsers with a small JavaScript toggle. (Building on and : the visual layer is CSS; the smooth show/hide is easiest with JS. It does not need to be IE‑only.)

Place this overlay as a direct child of the body and give the calendar a higher z‑index than the overlay.

HTML + CSS (example):

<div id="overlay"></div>
<div id="calendarModal" aria-hidden="true">…expanded calendar…</div>
#overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #000;               /* fallback */
  background: rgba(0,0,0,0.6);    /* modern */
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease;
  z-index: 900;
}
#overlay.show { opacity: 1; visibility: visible; }

#calendarModal { position: relative; z-index: 1000; }

Minimal JS to toggle (attach to your calendar open/close handlers):

var overlay = document.getElementById('overlay');
var modal = document.getElementById('calendarModal');

function openCalendar(){
  overlay.classList.add('show');
  modal.setAttribute('aria-hidden','false');
  // show modal UI
}
function closeCalendar(){
  overlay.classList.remove('show');
  modal.setAttribute('aria-hidden','true');
  // hide modal UI
}

overlay.addEventListener('click', closeCalendar);
document.addEventListener('keydown', function(e){ if(e.key === 'Escape') closeCalendar(); });

Troubleshooting notes:

  • If you trigger on hover, use mouseenter/mouseleave to avoid bubbling issues, but clicks are more reliable for a modal-like expand. Hover can cause the overlay to flicker when the cursor moves into the modal.
  • For very old IE, use an opacity/filter fallback or let a small JS (or jQuery) animate opacity; jQuery .fadeIn() handles older filters for you.
  • Ensure the overlay is outside any container with overflow:hidden so it covers the whole page.
  • Add keyboard/ARIA handling so keyboard users can close the expanded calendar.

Recommended Answers

All 3 Replies

Member Avatar for ShawnCplus

Well making the background dark is pretty easy with CSS (Modal CSS), however, the fading part requires some javascript. However, it is possible. to get CSS/DHTML to be completely cross-browser compliant even if it does require a bit of work. has an excellent list of browser compatibility for CSS and JavaScript.

Member Avatar for schumaj

thanks for the help

Member Avatar for MidiMagic

IE is actually the noncompliant browser. It violates more web standards than the others.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.