Load A Html Page Within Another Html Page

October 26, 2023 Post a Comment

I need to display or load a HTML page within another HTML page on a button click.I need this in a popup with the main html page as the background. Any help is appreciated.

Solution 1:

iframe is the tag which you can use for call other html pages into your web page

<iframesrc="http://www.google.co.in"name="targetframe"allowTransparency="true"scrolling="no"frameborder="0" ></iframe>

Solution 2:

You can use jQuery

<html><head><scriptsrc="jquery.js"></script><script> 
    $(function(){
      $("#divId").load("b.html"); 
    });
    </script></head><body><divid="divId"style="display:none;"></div></body></html>

on click event you can make it display block .

Solution 3:

Load a page within a page using an iframe. The following should serve as a good starting point.

<body><div><iframesrc="page1.html"name="targetframe"allowTransparency="true"scrolling="no"frameborder="0" ></iframe></div><br/><div><ahref="page2.html"target="targetframe">Link to Page 2</a><br /><ahref="page3.html"target="targetframe">Link to Page 3</a></div></body>

Solution 4:

Why don't you use

functionjsredir() {
  window.location.href = "https://stackoverflow.com";
}

<buttononclick="jsredir()">Click Me!</button>

Solution 5:

The thing you are asking is not popup but lightbox. For this, the trick is to display a semitransparent layer behind (called overlay) and that required div above it.

Hope you are familiar basic javascript. Use the following code. With javascript, change display:block to/from display:none to show/hide popup.

<divstyle="background-color:rgba(150,150,150,0.5);overflow:hidden;position:fixed;left:0px;top:0px;bottom:0px;right:0px;z-index:1000;display:block;"><divstyle="background-color:rgb(255,255,255);width:600px;position:static;margin:20pxauto;padding:20px30px0px;top:110px;overflow:hidden;z-index:1001;box-shadow:0px3px8pxrgba(34,25,25,0.4);"><iframesrc="otherpage.html"width="400px"></iframe></div></div>

Html5 Tutorial