27

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.

vijay
  • 637
  • 3
  • 9
  • 20
  • 2
    To clarify, you want the user to click a button on the first HTML page, which pops up a second HTML page with the content of the first HTML page as the background of the 2nd HTML page. Is that correct? – Aaron Dougherty Aug 20 '12 at 05:35
  • 1
    When I click a button in first page,it should open a popup in the same page and the second HTML page should be loaded in the popup.Is there any popup other than the windows popup? – vijay Aug 20 '12 at 05:50

11 Answers11

36

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>
Henry Woody
  • 14,024
  • 7
  • 39
  • 56
Jitender
  • 7,593
  • 30
  • 104
  • 210
12

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 .

DIXON THANKACHAN
  • 209
  • 2
  • 3
7

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>
Euric
  • 339
  • 2
  • 6
4

Why don't you use

function jsredir() {
  window.location.href = "https://stackoverflow.com";
}
<button onclick="jsredir()">Click Me!</button>
Doruk Ayar
  • 334
  • 1
  • 4
  • 17
3

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>
Arkan
  • 6,196
  • 3
  • 38
  • 54
Kapil Sharma
  • 10,135
  • 8
  • 37
  • 66
1
<button onclick="window.open('http://www.google.com');">Open popup</button>
ygssoni
  • 7,219
  • 2
  • 23
  • 24
1

you can try fancybox: http://fancyapps.com/fancybox/

you just need load jquery and fancybox.css and fancybox.js :

<!-- Add jquery -->
<script type="text/javascript" src="jquery.min.js"></script>

<!-- Add fancyBox -->
<link rel="stylesheet" href="jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="jquery.fancybox.pack.js"></script>

and add js code in your page:

$("youBtnSelector").click(function() {
    $.fancybox.open({
        href : 'you html path',
        type : 'iframe',
        padding : 5
    });
})

It is easy to do

zsytssk
  • 702
  • 1
  • 6
  • 14
1

In 2022

<div id="display" style="width: 100%;float: left;"></div>

<script>
  function load_anotherpage() {
    document.getElementById("display").innerHTML =
      '<embed type="text/html" src="https://libcon.in/" width="100%" height="800" >';
  }

  load_anotherpage();
</script>
Deepak Singh
  • 749
  • 4
  • 16
0

How about 

<button onclick="window.open('http://www.google.com','name','width=200,height=200');">Open</button>
swemon
  • 5,840
  • 4
  • 32
  • 54
0

If you are looking for a popup in the page, that is not a new browser window, then I would take a look at the various "LightBox" implementations in Javascript.

Aaron Dougherty
  • 727
  • 6
  • 9
0

iframe is great for what it does, but it isn't a popup. I use it on some of my pages so that the browser only has to load the new content which makes it faster loading and preserves bandwidth.

With a popup that loads on top of the current window, this is the true purpose of a popup, to show content over the page you're on without unloading the page you're on. iFrame is used to preserve the main page while displaying content within a window. the old method of having a default page with < *editable content > is somewhat outmoded. Others have provided the code I will add that using -onclick- function with a -popup- wither transparency or not. I would go with not!

Hope this clears things up.

Ken Williams
  • 1
  • 1