JavaScript Code - Using iFrames in ASP.NET with Min, Max, Close Button
C# - Using iFrames In ASP .NET
In my previous sample I explained about What is Iframe? - An Introduction, How to work with IFrame using jQuery & Code Behind in Asp.Net?. Here I will show you how to use iFrames In ASP.NET with Min, Max, Close Button. Find the source code below:-
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>IFrame using jQuery
in Asp.Net</title>
<link href="css/toolbar.css" rel="stylesheet" type="text/css" />
<link href="css/ResetStyleSheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="js/PopUpScript.js"></script>
<script type="text/javascript">
function openPopUp() {
var vTestElement =
document.getElementById('test');
vTestElement.style.display = 'block';
vTestElement.style.opacity = '1.0';
document.getElementById('Pop_Heading').innerHTML = "Demo";
var DataIFrame =
document.getElementById('DataIframe');
DataIFrame.style.width = '450px';
DataIFrame.style.height = '300px';
DataIFrame.src =
document.URL.substr(0, document.URL.lastIndexOf("/",
document.URL.length)) + "/test.aspx";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="Wrapper
POPUP"
id="test" style="display: none;">
<div class="Header">
<span class="Heading" id="Pop_Heading">Heading</span>
<div class="Controls">
<a class="action" onclick="min_btn_click('test')">
<img src="images/MainUI/PopUpMinimize.png" width="12" height="12" /></a> <a class="action"
onclick="max_btn_click('test')">
<img src="images/MainUI/PopUpMaximize.png" width="12" height="12" /></a>
<a class="action" onclick="Close_btn_click('test')">
<img src="images/MainUI/PopUpClose.png" width="12" height="12" /></a>
</div>
</div>
<div class="ContentInIframe">
<iframe id="DataIframe" style="border: 1px solid #5f5f5f; background: #EEEEEE !important;" height="350"
width="400"></iframe>
</div>
</div>
<br />
<br />
<a href="#" onclick="openPopUp();">Click here to open
Iframe</a>
</form>
</body>
</html>
----
PopUpScript.js
var popupW, popupH;
$(document).ready(function() {
$(".POPUP").draggable();
//Align
the pop up to the center
popupW = $(".POPUP").width();
popupH = $(".POPUP").height();
$(".POPUP").css('margin-left', -popupW/2);
$(".POPUP").css('margin-top', -popupH/2);
});
function Close_btn_click(pControlId)
{
var vPOPUP = $('#'+ pControlId);
if( vPOPUP.length > 0
)
{
vPOPUP.animate({
opacity: 0.1
}, 450, function() {
// Animation complete.
vPOPUP.css("display","none");
});
}
else
{
alert('Invalid
control id.');
}
}
function min_btn_click(pControlId)
{
var vPOPUP = $("#" + pControlId);
if( vPOPUP.length > 0 )
{
$(".ContentInIframe" , vPOPUP).css("display","none");
vPOPUP.animate({
'margin-left': 0,
'margin-top':0,
left:'0px',
top:'94.5%',
position:'absolute'
}, 500, function() {
// Animation complete.
});
}
else
{
alert('Invalid control id.');
}
}
function max_btn_click(pControlId)
{
var vPOPUP = $("#" + pControlId);
if( vPOPUP.length > 0 )
{
if($('.ContentInIframe', vPOPUP).css("display")=='none')
{ $(".ContentInIframe",
vPOPUP).css("display","block");
vPOPUP.animate({
top:'50%',
left:'50%',
'margin-left':
-popupW/2,
'margin-top':-popupH/2,
position:'absolute',
opacity: 1,
}, 500, function() {
// Animation complete.
});
}
else{$(".ContentInIframe", vPOPUP).css("display","block");}
}
else
{
alert('Invalid Control Id.');
}
}
/*--------------------------------------------------------------------------------------------*/
ResetStyleSheet.css
@charset "utf-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5
display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
toolbar.css
/*------------Toolbar---------------*/
body {
font-family: arial, verdana, calibri;
font-size: 12px;
}
.Wrapper {
position: fixed;
top: 50%;
left: 50%;
min-width: 200px;
min-height:20px;
font-family: arial, verdana, calibri;
font-size: 12px;
border: 3px solid #7e7b7b;
overflow: hidden;
background-color:#FFF;
padding:5px;
}
.Header{ background-color:#7e7b7b; height:20px; color:#fff; font-weight:bold; font-family: arial, verdana, calibri;}
.Heading{ margin-left:5px; display:block; position:absolute; margin-top:4px;}
.Controls{ position:absolute; right: 10px; top: 9px;}
.Controls a.action{ width:12px; height:12px; display:block; cursor:pointer; margin-right:3px; margin-left:3px; float:left;}
/*--------------------------------------------------------------------------------------------------------------------------*/
Download the source code click here
Please leave your comments, suggestions and queries about this post in the comment sections in order for me to improve my writing skills and to showcase more useful posts. Thanks for reading!
JavaScript Code - Using iFrames in ASP.NET with Min, Max, Close Button
Reviewed by Ravi Kumar
on
11:47 AM
Rating:
Reviewed by Ravi Kumar
on
11:47 AM
Rating:
No comments: