Introduction:
Here I will explain how to display html page content in jQuery popup using facebox plugin or how to show html page as popup window or show html page inside another page. Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, html pages or entire remote pages in popup.
Here I will explain how to display html page content in jQuery popup using facebox plugin or how to show html page as popup window or show html page inside another page. Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, html pages or entire remote pages in popup.
Description:
In previous posts I explained jQuery fancy switch on and off, jQuery Google Currency Converter API Example, jQuery generate thumbnails from youtube videos, jQuery Change style of controls, jQuery Add fade in effect to webpage, and many articles relating to JQuery and modal popup. Now I will explain how to use jQuery to show html page content using facebox plugin.
In previous posts I explained jQuery fancy switch on and off, jQuery Google Currency Converter API Example, jQuery generate thumbnails from youtube videos, jQuery Change style of controls, jQuery Add fade in effect to webpage, and many articles relating to JQuery and modal popup. Now I will explain how to use jQuery to show html page content using facebox plugin.
To
implement this functionality first create website and write following code in
default.aspx
Default.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Show htmle page content in popup</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<link href="src/facebox.css" media="screen" rel="stylesheet" type="text/css" />
<script src="src/facebox.js"
type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
$('a[rel*=facebox]').facebox({
loadingImage: 'src/loading.gif',
closeImage: 'src/closelabel.png'
})
})
</script>
</head>
<body>
<div style="padding:20px">
<h2>Show Html Page in Popup</h2>
<p> <a href="sample.html" rel="facebox">Show Sample.html in popup</a> </p>
</div>
</body>
</html>
|
If you observe above code in header section I added src/facebox.css, src/facebox.js by using these files we can show our html page content in popup. If you want
these files you can get it from downloadable folder or get it from here facebox . In body
tag I added <a href="sample.html"
rel="facebox">
this hyperlink automatically use facebox script
files to show sample.html in popup. Any hyperlink with rel="facebox" tag
automatically use facebox plugin to show data in popup.
Now right click on your application à Add New item à Select html file and give name as sample.html and click ok
Now open sample.html file and write the
following code
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample file</title>
</head>
<body>
<h2>Hi Welcome to Aspdotnet-Suresh.com</h2>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ3C-tQDXPIMmR_dS4yVjSxehkRh6cA3XmKuGynVFcv0my1TMzWis9ucLgUvpBhQ76zwFfKrp5SieMfZjZmiWdk8DCcL8rlv315aRPY8u3RjzO1zBros0Dm9NtVljyBYMtukeEmxuR01Q/"
/>
</body>
</html>
|
Once you completed coding and adding script files
run your application output will like as shown below
Demo
 |
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
5 comments :
thanx man..
great
This website is wonderful , Thank u for your great effort
Mr. ..You are great..
I have used your code.But I want to know one thing.I tried to put an asp.net web page .it is displaying correctly but when I click on a button ,It is navigating to a web page which I had given it as href value in hyperlink "a"
Note: Only a member of this blog may post a comment.