Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Display HTML Page Content in jQuery Popup Window using Facebox Plugin

Mar 25, 2014
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.

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.

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://lh5.googleusercontent.com/_B28NJpJ61hA/TdgnS7lh7mI/AAAAAAAAAi4/oLTicIRgEIw/FinalLogo.png" />
</body>
</html>
Once you completed coding and adding script files run your application output will like as shown below

Demo


Download Sample Code Attached

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 RSS subscribe by email Subscribe by Email

5 comments :

Gaurav said...

thanx man..

Anonymous said...

great

Anonymous said...

This website is wonderful , Thank u for your great effort

Anonymous said...

Mr. ..You are great..

Unknown said...

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"

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.