Popup window using Iframe


In this article I'm trying to explain how to open pop up window using iframe. Most of the people are facing some issue while open pop up with new page. Using Iframe we can achieve it by using simple simple Jquery code snippet.

Popup window using Iframe



Description :


In this article I'm trying to explain how to open pop up window using iframe. Most of the people are facing some issue while open pop up with new page. Using Iframe we can achieve it by using simple simple Jquery code snippet.

Jquery Script :



<script type="text/javascript" language="javascript">
function openModalPopup(page) {

var ht = 200;
var wt = 400;

if (page != null) {
var $dialog = $('<div id="dialog"></div>')
.html('<iframe id="ifModal" style="border: 0px; overflow: scroll; position: fixed;" src="' + page + '" width="100%" height="100%"></iframe>')
.dialog({
autoOpen: false,
modal: true,
height: ht,
width: wt,
close: function (event, ui) {
location.href = location.href;
}
});
$dialog.dialog('open');
}
}
</script>

Source Code :



<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PopUp.aspx.cs" Inherits="ScorpCLM_UI.PopUp" %>

<!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></title>
<link href="Resources/StyleSheet.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="Resources/TabsStyle.css" />
<link href="Scripts/jquery-ui.theme.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui.js" type="text/javascript"></script>
<link href="Scripts/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="Scripts/gridviewScroll.min.js" type="text/javascript"></script>
<script src="Scripts/scorp.js" type="text/javascript"></script>
<link href="Resources/Segments.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript">
function openModalPopup(page) {

var ht = 200;
var wt = 400;

if (page != null) {
var $dialog = $('<div id="dialog"></div>')
.html('<iframe id="ifModal" style="border: 0px; overflow: scroll; position: fixed;" src="' + page + '" width="100%" height="100%"></iframe>')
.dialog({
autoOpen: false,
modal: true,
height: ht,
width: wt,
close: function (event, ui) {
location.href = location.href;
}
});
$dialog.dialog('open');
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="gvpopup" runat="server" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None"
BorderWidth="1px" CellPadding="4" ForeColor="Black" GridLines="Horizontal" OnRowCommand="gvpopup_OnRowCommand">
<FooterStyle BackColor="gray" ForeColor="Black" />
<HeaderStyle BackColor="#333333" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="White" ForeColor="Black" HorizontalAlign="Right" />
<SelectedRowStyle BackColor="#CC3333" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#F7F7F7" />
<SortedAscendingHeaderStyle BackColor="#4B4B4B" />
<SortedDescendingCellStyle BackColor="#E5E5E5" />
<SortedDescendingHeaderStyle BackColor="#242121" />
<Columns>

<asp:BoundField DataField="Id" HeaderText="Employee No" />
<asp:TemplateField HeaderText="Employee Name">
<ItemTemplate>
<asp:LinkButton ID="lnkName" runat="server" CommandName="PopUp" Text='<%#DataBinder.Eval(Container.DataItem,"Name") %>'></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Sal" HeaderText="Employee Salary" />
<asp:BoundField DataField="Designation" HeaderText="Designation" />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>




Code Behind :



using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;

namespace ScorpCLM_UI
{
public partial class PopUp : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.Add("Id");
dt.Columns.Add("Name");
dt.Columns.Add("Sal");
dt.Columns.Add("Designation");

DataRow dr = dt.NewRow();
dr["Id"] = 12345;
dr["Name"] = "Naveen";
dr["Sal"] = "23000";
dr["Designation"] = "Software Engineer";

DataRow dr1 = dt.NewRow();
dr1["Id"] = 12346;
dr1["Name"] = "Raj";
dr1["Sal"] = "30000";
dr1["Designation"] = "Senior Software Engineer";

DataRow dr2 = dt.NewRow();
dr2["Id"] = 12347;
dr2["Name"] = "Pawan";
dr2["Sal"] = "20000";
dr2["Designation"] = "HR";

dt.Rows.Add(dr);
dt.Rows.Add(dr1);
dt.Rows.Add(dr2);

gvpopup.DataSource = dt;
gvpopup.DataBind();
}
}
protected void gvpopup_OnRowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "PopUp")
{
string URL = "CheckedGrid.aspx";
ScriptManager.RegisterStartupScript(this, this.GetType(), "myalert", "javascript:openModalPopup('" + URL + "');", true);
}
}
}
}

Output:



1

Conclusion :


This article will help you those who are looking for the same.


Comments

Author: saleem16 Oct 2014 Member Level: Bronze   Points : 0

please get me java script files



  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: