Member Avatar for divin757

I want to have an iframe expand and center on the screen when a button is clicked. This would be similar to creating a lightbox for it but I dont want to have the content in the iframe reload. I have found solutions that can resize an element but it then pushes everything around it to make room. Here is an example of what I dont want:

I have tried setting position to absolute but then auto margins dont seem to work.

  • 2 Contributors
  • 2 Replies
  • 179 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by drjohn

Dani AI

Generated

A reliable pattern is to place the iframe inside a full-viewport fixed overlay and animate the iframe container with CSS transforms. Positioning the overlay as fixed keeps it out of document flow so the page does not reflow (the problem seen when resizing elements in-place). Keep the iframe element in the DOM and do not change its src; toggling classes that affect opacity/transform will animate the "grow" effect without reloading the iframe content. Absolute + auto margins can fail for vertical centering; use flexbox centering or transform: translate(-50%,-50%) instead.

/* overlay + centered iframe wrapper */
.overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 10000;
}
.overlay.open { visibility: visible; opacity: 1; }

.iframe-wrap {
  width: 80vw;
  height: 80vh;
  transform: scale(.2);
  transition: transform .3s ease;
  transform-origin: center center;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  background: #fff;
}
.overlay.open .iframe-wrap { transform: scale(1); }

.iframe-wrap iframe { width: 100%; height: 100%; border: 0; }
<button id="openFrame">Open</button>
<div class="overlay" id="overlay">
  <div class="iframe-wrap" role="dialog" aria-hidden="true">
    <iframe src="about:blank"></iframe>
  </div>
</div>

<script>
const btn = document.getElementById('openFrame');
const overlay = document.getElementById('overlay');
const wrap = overlay.querySelector('.iframe-wrap');

btn.addEventListener('click', () => {
  overlay.classList.add('open');
  wrap.setAttribute('aria-hidden', 'false');
  wrap.querySelector('iframe').focus();
});
overlay.addEventListener('click', e => {
  if (e.target === overlay) {
    overlay.classList.remove('open');
    wrap.setAttribute('aria-hidden', 'true');
    btn.focus();
  }
});
</script>

Notes and troubleshooting: this approach preserves iframe state because the node stays in the DOM; removing and re-inserting an iframe will reload it. If the framed page is cross-origin, automatic sizing from the parent is not possible without cooperation (use postMessage from the framed page). For accessibility, manage focus and use role="dialog"/aria-hidden toggles. This addresses 's layout issue with absolute margins and builds on the CSS-based expansion ideas mentioned by while keeping iframe content intact.

Recommended Answers

All 2 Replies

Member Avatar for divin757

Google images is a perfect example of what I'm wanting. It allows for an element to expand over top of the existing content. I would still need to have it center on the screen.

Member Avatar for drjohn
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.