Load A HTML Page Within Another HTML Page

September 22, 2022 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

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

Solution 2:

You can use jQuery

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#divId").load("b.html"); 
    });
    </script> 
  </head> 

  <body> 
     <div id="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>
    <iframe src="page1.html" name="targetframe" allowTransparency="true" scrolling="no" frameborder="0" >
    </iframe>
  </div>

  <br/>

  <div>
    <a href="page2.html" target="targetframe">Link to Page 2</a><br />
    <a href="page3.html" target="targetframe">Link to Page 3</a>
  </div>
</body>

Solution 4:

Why don't you use

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

<button onclick="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.

<div style="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;">
    <div style="background-color: rgb(255, 255, 255); width: 600px; position: static; margin: 20px auto; padding: 20px 30px 0px; top: 110px; overflow: hidden; z-index: 1001; box-shadow: 0px 3px 8px rgba(34, 25, 25, 0.4);">
        <iframe src="otherpage.html" width="400px"></iframe>
    </div>
</div>

Html5 Developer