Member Avatar for jindalarpan

how i can put iframe on top of other iframe in html,


i am trying to do is as follows
there is a iframe of size 100px by 100px having src as web1.html
and when i click a button outside the iframe new iframe should come up on top of the frist one of size 200px by 200px havinf src as web2.html

how this can be done ?

  • 2 Contributors
  • 2 Replies
  • 112 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

asked how to show a larger iframe on top of an existing smaller one when a button (outside the iframe) is clicked. was on the right track with positioning and stacking, but a clearer, robust pattern is to insert an overlay element into the parent document and toggle it. That keeps the overlay outside the iframe DOM and avoids cross-frame scripting issues.

A simple, practical pattern:

  • Create an overlay container in the parent (covering the viewport or a positioned container).
  • Put the overlay iframe (and a close control) inside that container.
  • Use CSS to center the iframe and give the container a very high z-index so it sits above other content.
  • Show/hide by adding/removing the container or toggling a class; prefer display/opacity + pointer-events for clean transitions.

Example (minimal) — CSS and JS to create and remove the overlay:

/* CSS */
.iframe-overlay { position:fixed; top:0; right:0; bottom:0; left:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.45); z-index:999999; }
.overlay-frame { width:80vw; height:80vh; border:0; max-width:900px; max-height:700px; }

/* JS */
function openOverlay(src) {
  var div = document.createElement('div');
  div.className = 'iframe-overlay';
  div.innerHTML = '<button class="close">Close</button><iframe class="overlay-frame" src="'+src+'"></iframe>';
  document.body.appendChild(div);
  div.querySelector('.close').addEventListener('click', function(){ div.remove(); });
}

Notes and cautions:

Recommended Answers

All 2 Replies

Member Avatar for jindalarpan

hello any one ?

Member Avatar for almostbob

css styling

#frame1 {top:150px; left:150px; height:100px; width:100px;}
#frame2 {top:100px; left:100px; height:200px; width:200px; z-index:10; visibility:hidden; }
<button onclick='document.getElementbyID("frame2").visibility="show";'} />

ignoring the *** positioning, better to set it relative so the document flows, and adjusts to screen changes,
hidden and show may not be the right words, w3schools.com for proper format
please consider this as a guide only

dont be so hasty, its a free volunteer forum,
people will read the post eventually << attempted humor :D

Edited by almostbob because: n/a
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.