JavaScript Code - Using iFrames in ASP.NET with Min, Max, Close Button

random

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:-

Using HTML iFrames In ASP.NET,C# - Using iFrames In ASP .NET

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: 5

No comments:

All Rights Reserved by Etechpulse © 2012 - 2017

Contact Form

Name

Email *

Message *

Powered by Blogger.