Load a HTML page within another HTML page

Question

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

User · Answer

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>

User · Answer

lt button onclick  window open  http   www google com     gt Open popup lt  button gt

User · Answer

you can try fancybox  http   fancyapps com fancybox   you just need load jquery and fancybox css and fancybox js     lt  -- Add jquery -- gt   lt script type  text javascript  src  jquery min js  gt  lt  script gt    lt  -- Add fancyBox -- gt   lt link rel  stylesheet  href  jquery fancybox css  type  text css  media  screen    gt   lt script type  text javascript  src  jquery fancybox pack js  gt  lt  script gt    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

User · Answer

You can use jQuery   lt html gt      lt head gt        lt script src  jquery js  gt  lt  script gt        lt script gt         function              divId   load  b html                  lt  script gt      lt  head gt       lt body gt         lt div id  divId  style  display none   gt  lt  div gt     lt  body gt    lt  html gt    on click event you can make it display block

User · Answer

Why don t you use   x000D   x000D  function jsredir     x000D    window location href    https   stackoverflow com   x000D    x000D   lt button onclick  jsredir    gt Click Me  lt  button gt  x000D   x000D   x000D

User · Answer

How about    lt button onclick  window open  http   www google com   name   width 200 height 200     gt Open lt  button gt

User · Answer

iframe is the tag which you can use for call other html pages into your web page   lt iframe src  http   www google co in  name  targetframe  allowTransparency  true  scrolling  no  frameborder  0   gt       lt  iframe gt

User · Answer

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

User · Answer

Load a page within a page using an iframe  The following should serve as a good starting point    lt body gt     lt div gt       lt iframe src  page1 html  name  targetframe  allowTransparency  true  scrolling  no  frameborder  0   gt       lt  iframe gt     lt  div gt      lt br  gt      lt div gt       lt a href  page2 html  target  targetframe  gt Link to Page 2 lt  a gt  lt br   gt       lt a href  page3 html  target  targetframe  gt Link to Page 3 lt  a gt     lt  div gt   lt  body gt

[html] Load a HTML page within another HTML page

Examples related to html