I have a gridview and a button inside it. What I want to do is to reference a simple pop-up div from this link. I want to open it on button click.
Here is my HTML Code:
<asp:GridView ID="gvContactUs" runat="server" AllowSorting="True" AutoGenerateColumns="False"
DataKeyNames="ContactID" Width="100%" CellPadding="3" CellSpacing="1" OnPageIndexChanging="gvContactUs_PageIndexChanging"
OnRowCommand="gvContactUs_RowCommand" OnRowDataBound="gvContactUs_RowDataBound"
OnRowDeleting="gvContactUs_RowDeleting" OnSorting="gvContactUs_Sorting" AllowPaging="True"
BackColor="White" BorderColor="White" BorderStyle="Ridge" BorderWidth="2px" GridLines="None">
<Columns>
<asp:TemplateField HeaderText="Edit" ItemStyle-HorizontalAlign="Center" HeaderStyle-Width="3%">
<ItemTemplate>
<asp:Button Text="text" ID="hello" runat="server" />
<div>
<div id="overlay" class="web_dialog_overlay">
</div>
<div id="dialog" class="web_dialog">
<table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
<tr>
<td class="web_dialog_title">
Message
</td>
<td class="web_dialog_title align_right">
<a href="#" id="btnClose">Close</a>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<div id="brands">
<%#Eval("Message")%></a>
</div>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input id="btnSubmit" type="button" value="Submit" />
</td>
</tr>
</table>
</div>
</ItemTemplate>
<HeaderStyle Width="7%" />
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Name" ItemStyle-HorizontalAlign="Left">
<ItemTemplate>
<%#Eval("Name")%>
</ItemTemplate>
<ItemStyle HorizontalAlign="Left" />
<HeaderStyle Width="11%" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Email" ItemStyle-HorizontalAlign="Left" HeaderStyle-Width="13%">
<ItemTemplate>
<a href="mailto:<%#Eval("Email")%>" class="EmailLink">
<%#Eval("Email")%></a>
</ItemTemplate>
<HeaderStyle Width="13%" />
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Phone" HeaderStyle-HorizontalAlign="center" HeaderStyle-Width="7%">
<HeaderStyle HorizontalAlign="Center"></HeaderStyle>
<ItemStyle HorizontalAlign="Center" Width="40px" />
<ItemTemplate>
<%#Eval("Phone")%>
</ItemTemplate>
<HeaderStyle Width="8%" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Status" HeaderStyle-HorizontalAlign="center" HeaderStyle-Width="7%">
<HeaderStyle HorizontalAlign="Center"></HeaderStyle>
<ItemStyle HorizontalAlign="Center" Width="40px" />
<ItemTemplate>
<%#Eval("Subject")%>
</ItemTemplate>
<HeaderStyle Width="13%" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Delete" ItemStyle-HorizontalAlign="Center" HeaderStyle-Width="7%">
<ItemTemplate>
<asp:LinkButton CommandName="Delete" CommandArgument='<%#Eval("ContactID") %>' runat="server"
ID="lnkbtnDelete"><img src="Images/delete.gif" border="0" alt='Click to Delete this Entry' title='Click to Delete this Entry' />
</asp:LinkButton>
</ItemTemplate>
<HeaderStyle Width="7%" />
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="#C6C3C6" ForeColor="Black" />
<HeaderStyle Height="30px" BackColor="#3E3050" Font-Bold="True" ForeColor="#ffffff" />
<PagerStyle ForeColor="Black" BackColor="#C6C3C6" HorizontalAlign="Right" />
<RowStyle Height="25px" BackColor="#DEDFDE" ForeColor="Black" />
<SelectedRowStyle BackColor="#9471DE" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#F1F1F1" />
<SortedAscendingHeaderStyle BackColor="#594B9C" />
<SortedDescendingCellStyle BackColor="#CAC9C9" />
<SortedDescendingHeaderStyle BackColor="#33276A" />
</asp:GridView>
Here is the Css used for Pop Up
.web_dialog_overlay
{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #000000;
opacity: .15;
filter: alpha(opacity=15);
-moz-opacity: .15;
z-index: 101;
display: none;
}
.web_dialog
{
display: none;
position: fixed;
width: 380px;
height: 200px;
top: 50%;
left: 50%;
margin-left: -190px;
margin-top: -100px;
background-color: #ffffff;
border: 2px solid #336699;
padding: 0px;
z-index: 102;
font-family: Verdana;
font-size: 10pt;
}
.web_dialog_title
{
border-bottom: solid 2px #336699;
background-color: #336699;
padding: 4px;
color: White;
font-weight: bold;
}
.web_dialog_title a
{
color: White;
text-decoration: none;
}
.align_right
{
text-align: right;
}
And here is the jQuery code for pop up:
$(document).ready(function () {
$(function () {
$('input[id*=hello]').click(function () {
ShowDialog(true);
e.preventDefault();
return false;
});
});
$('[id$=btnShowModal]').live('click', function (e) {
ShowDialog(true);
e.preventDefault();
});
$("#btnClose").click(function (e) {
HideDialog();
e.preventDefault();
});
$("#btnSubmit").click(function (e) {
var brand = $("#brands input:radio:checked").val();
$("#output").html("<b>Your favorite mobile brand: </b>" + brand);
HideDialog();
e.preventDefault();
});
});
function ShowDialog(modal) {
$("#overlay").show();
$("#dialog").fadeIn(300);
if (modal) {
$("#overlay").unbind("click");
} else {
$("#overlay").click(function (e) {
HideDialog();
});
}
}
function HideDialog() {
$("#overlay").hide();
$("#dialog").fadeOut(300);
}
Made a silly mistake :
Forgot to close a div and in jquery code there is a small mistake that is :
e was missed. by the way thanks all…………. 🙂