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.
This question is related to
html
<button onclick="window.open('http://www.google.com');">Open popup</button>
How about
<button onclick="window.open('http://www.google.com','name','width=200,height=200');">Open</button>
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>
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>
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
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 .
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.
Why don't you use
function jsredir() {_x000D_
window.location.href = "https://stackoverflow.com";_x000D_
}<button onclick="jsredir()">Click Me!</button>Source: Stackoverflow.com