Selectively hiding a HyperLinkField in a gridview in a control - asp.net

I have a control which I can call to populate the top of a aspx page with demographic information as follows.
<div runat="server" id="headerline" style="width:100%; background-color:#FFFFCC; border-color: #FFFFCC; " >
<asp:GridView ID="GridView1" skinID="headerline" runat="server" DataSourceID="odsPatientByID" AutoGenerateColumns="False" Width="100%" >
<HeaderStyle CssClass="invisible" />
<RowStyle Width="100px" />
<Columns>
<asp:HyperLinkField DataNavigateUrlFields="PATIENT_ID" DataNavigateUrlFormatString="~/demographics/search_demographics.aspx?PatientID={0}" Text="DEMOGRAPHICS " ItemStyle-HorizontalAlign="Left" >
</asp:HyperLinkField>
<ItemTemplate >
<asp:Label SkinID="headerline" ID="lblNAME" runat="server" Text=' Name: ' />
<asp:Label SkinID="headerline" ID="lblPTNAME" runat="server" Text='<%# Shis.SCR.UI.Common.CapitalisePatientName(Eval("PT_NAME")) %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField >
<ItemTemplate >
<asp:Label SkinID="headerline" ID="lblDoB" runat="server" Text=' DoB: ' />
<asp:Label SkinID="headerline" ID="lblDateofBirth" runat="server" Text='<%# Bind("N1_10_DATE_BIRTH") %>' />
<asp:Label skinID="headerlineage" ID="lblAge" runat="server" Text='<%# GetDisplayAge("" & Eval("N1_10_DATE_BIRTH"),"" & Eval("L_DEATH_STATUS")) %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField >
<ItemTemplate >
<asp:Label SkinID="headerline" ID="lblSex" runat="server" Text=' Gender: ' />
<asp:Label SkinID="headerline" ID="lblGender" runat="server" Text='<%# EVAL("GENDER") %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
I display the demographic data like this and it works fine
<div>
<controls:Demoline id="demoLine1" runat="server" />
</div>
What I would like to do is hide the HyperLinkfield when I select a Print option on the page and I get taken to the print page. Is this possible and if so how?

Look into RowDataBound event for the grid, it fires every time a row is bound to the grid. Do you check for a print param, from querystring or where ever and hide hyperlink. On phone so don't have code to hand
Look at
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.gridview.rowdatabound(v=vs.110).aspx
Give your Hyperlink an id eg "MyHyperLink"
add this code:
protected void GridView1_OnRowDataBound(object sender, GridViewRowEventArgs e)
{
if (Request.QueryString["print"] != "1")
return;
var link = e.Row.FindControl("MyHyperLink") as HyperLink;
if (link != null)
link.Visible = false;
}
and then my add to your asp:GridView element:
OnRowDataBound="GridView1_OnRowDataBound"

Related

Getting selectedvalue of radiobuttonlist in gridview on selectedindexchanged

There is a radiobuttonlist in a gridview. I want to do something with the selectedvalue of which radiobuttonlist's selectedindexchanged.
But it's giving the old value always. For example the first item is selected when page load. If I click the second item, its still giving the first item's value.
My codes, in aspx file:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="cezaDS" >
<Columns>
<asp:TemplateField HeaderText="Öğrenci Bilgileri" SortExpression="SINIF">
<ItemTemplate>
<asp:Label ID="lbSiraNo" Visible="false" runat="server" Text='<%# Eval("SIRA_NO") %>'></asp:Label>
<asp:Label ID="Label4" runat="server" Text='<%# Bind("ADI_SOYADI") %>'></asp:Label><br />
<asp:Label ID="Label3" runat="server" Text='<%# Bind("OKUL_NO") %>'></asp:Label><br />
<asp:Label ID="Label2" runat="server" Text='<%# Bind("BOLUM") %>'></asp:Label><br />
<asp:Label ID="Label1" runat="server" Text='<%# Bind("SINIF") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Ceza Türü ve Aldığı Zaman" SortExpression="DONEM">
<ItemTemplate>
Ceza Türü: <b><asp:Label ID="Label7" runat="server" Text='<%# Bind("CEZA_TURU") %>'></asp:Label></b><br />
Cezayı Aldığı Sınıf: <b><asp:Label ID="Label6" runat="server" Text='<%# Bind("CEZA_ALDIGI_SINIF") %>'></asp:Label></b><br />
Cezayı Aldığı Öğretim Yılı: <b><asp:Label ID="Label5" runat="server" Text='<%# Bind("DONEM") %>'></asp:Label></b>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="ILGILI_MADDE" HeaderText="İlgili Madde" SortExpression="ILGILI_MADDE" />
<asp:TemplateField HeaderText="Kararınız">
<ItemTemplate>
<asp:RadioButtonList ID="rdList" runat="server"
AutoPostBack="True" OnSelectedIndexChanged="rdList_SelectedIndexChanged">
<asp:ListItem Value="Kaldırılsın">Kaldırılsın</asp:ListItem>
<asp:ListItem Value="Kaldırılmasın">Kaldırılmasın</asp:ListItem>
</asp:RadioButtonList>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
In cs file:
protected void rdList_SelectedIndexChanged(object sender, EventArgs e)
{
GridViewRow row = (GridViewRow)(((RadioButtonList)sender).NamingContainer);
Label cezaSiraNo = (Label)(row.FindControl("lbSiraNo"));
RadioButtonList clickedList= (RadioButtonList)sender;
string x = clickedList.SelectedValue;
//...
Here x variable is taking the wrong value.

How to access autogenerated buttons in gridview in RowDataBound event at server side

I have a grid view which has two autogenerated Edit and delete buttons in first cell itself. The code is as below
<asp:GridView ID="grdStudent" runat="server" DataKeyNames="id" AutoGenerateColumns="false"
AutoGenerateDeleteButton="true" AutoGenerateEditButton="true"
OnRowDeleting="grdStudent_RowDeleting" OnRowDataBound="grdStudent_RowDataBound" OnRowEditing="EditGrid" OnRowCancelingEdit="CancelEdit" OnRowUpdating="UpdateGrid"
ForeColor="#333333" CellPadding="4" GridLines="Both" Width="90%"
class="table table-striped table-bordered table-hover" AllowPaging="True"
EnableSortingAndPagingCallbacks="false">
<AlternatingRowStyle BackColor="White" />
<EditRowStyle BackColor="#999999" BorderStyle="Solid" HorizontalAlign="Center"
VerticalAlign="Middle" />
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333"
BorderStyle="Solid" HorizontalAlign="Center" VerticalAlign="Middle" />
<SortedAscendingCellStyle BackColor="#E9E7E2" />
<SortedAscendingHeaderStyle BackColor="#506C8C" />
<SortedDescendingCellStyle BackColor="#FFFDF8" />
<SortedDescendingHeaderStyle BackColor="#6F8DAE" CssClass="table table-striped table-bordered table-hover" />
<Columns>
<asp:TemplateField HeaderText="First Name">
<ItemTemplate>
<asp:Label ID="lblID" runat="server" Text='<%#Eval("id") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="First Name">
<ItemTemplate>
<asp:Label ID="lblFirstName" runat="server" Text='<%#Eval("first_name") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox runat="server" ID="txtFirstName" Text='<%#Eval("first_name") %>' Width="100px"></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Last Name">
<ItemTemplate>
<asp:Label ID="lblLastName" runat="server" Text='<%#Eval("last_name") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox runat="server" ID="txtLastName" Text='<%#Eval("last_name") %>' Width="100px"></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Contact No">
<ItemTemplate>
<asp:Label ID="lblContactNo" runat="server" Text='<%#Eval("phone_no") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox runat="server" ID="txtContactNo" Text='<%#Eval("phone_no") %>' Width="100px"></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Email">
<ItemTemplate>
<asp:Label ID="lblEmail" runat="server" Text='<%#Eval("email") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox runat="server" ID="txtEmail" Text='<%#Eval("email") %>' Width="100px"></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Address">
<ItemTemplate>
<asp:Label ID="lblAddress" runat="server" Text='<%#Eval("address") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox runat="server" ID="txtAddress" Text='<%#Eval("address") %>' Width="100px"></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<%-- <asp:BoundField DataField="active" HeaderText="IsActive" />--%>
<asp:TemplateField HeaderText="IsActive">
<ItemTemplate>
<asp:Label ID="lblIsActive" runat="server" Text='<%#Eval("active") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<select id="ddlIsActive" class="dropdown" runat="server">
<option value="1">True</option>
<option value="2">False</option>
</select>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Username">
<ItemTemplate>
<asp:Label ID="lblUsername" runat="server" Text='<%#Eval("username") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox runat="server" ID="txtUsername" Text='<%#Eval("username") %>' Width="100px"></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Password">
<ItemTemplate>
<asp:Label ID="lblPassword" runat="server" Text='<%#Eval("password") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox runat="server" ID="txtPassword" Text='<%#Eval("password") %>' Width="100px"></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<%--<asp:ButtonField ButtonType="Link" --%>
</Columns>
</asp:GridView>
I need to access the delete button in Row Data bound event and add a confirmation attribute to it. I tried the below code but only Edit button is accessed at server side.
protected void grdStudent_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow && e.Row.RowIndex != grdStudent.EditIndex)
{
string text = ((LinkButton)e.Row.Cells[0].Controls[0]).Text;
//text always has the value as "Edit" never "Delete"
if (text == "delete")
{
(e.Row.Cells[0].Controls[0] as LinkButton).Attributes["onclick"] = "return confirm('Do you want to edit this row?');";
//del.OnClientClick = "return confirm('Are you certain you want to delete the record?');";
}
}
// (e.Row.Cells[0].Controls[0] as LinkButton).Attributes["onclick"] = "return confirm('Do you want to edit this row?');";
// //(e.Row.Cells[0].Controls[1] as LinkButton).Attributes["onclick"] = "return confirm('Do you want to delete this row?');";
//}
//if (e.Row.RowType == DataControlRowType.DataRow && e.Row.RowIndex == grdStudent.EditIndex)
//{
// (e.Row.Cells[0].Controls[0] as LinkButton).Attributes["onclick"] = "return confirm('Do you want to edit this row?');";
//}
}
How can I access Delete button and add a confirmation message box.
You have to add the attributes as a key/value pair.
if (e.Row.RowType == DataControlRowType.DataRow)
{
LinkButton lbEdit = e.Row.Cells[0].Controls[0] as LinkButton;
lbEdit.Attributes.Add("onclick", "return confirm('Do you want to edit this row?');");
LinkButton lbDelete = e.Row.Cells[0].Controls[2] as LinkButton;
lbDelete.Attributes.Add("onclick","return confirm('Do you want to delete this row?');");
}
#VDWWD's answer should solve the original problem.
These days, I personally like to use icon/font to look more professional.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="GridViewDemo.aspx.cs" Inherits="DemoWebForm.GridViewDemo" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
<body>
<form id="form1" runat="server">
<br />
<div class="container">
<asp:GridView runat="server" ID="grdStudent"
AutoGenerateColumns="False"
OnRowEditing="grdStudent_RowEditing"
OnRowDeleting="grdStudent_RowDeleting"
OnRowDataBound="grdStudent_RowDataBound"
CssClass="table">
<Columns>
<asp:TemplateField HeaderText="Edit">
<ItemTemplate>
<asp:LinkButton runat="server" ID="EditLinkButton" CommandName="Edit">
<i class="fa fa-pencil"></i>
</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Delete">
<ItemTemplate>
<asp:LinkButton runat="server" ID="DeleteLinkButton" CommandName="Delete">
<i class="fa fa-trash-o"></i>
</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Id" HeaderText="Id" />
<asp:BoundField DataField="Name" HeaderText="Name" />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
Code Behind
using System;
using System.Collections.Generic;
using System.Web.UI.WebControls;
namespace DemoWebForm
{
public partial class GridViewDemo : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
grdStudent.DataSource = Collection;
grdStudent.DataBind();
}
}
protected void grdStudent_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
var d = e.Row.FindControl("DeleteLinkButton") as LinkButton;
d.Attributes.Add("onclick", "return confirm('Do you want to delete this row?');");
}
}
protected void grdStudent_RowDeleting(object sender, GridViewDeleteEventArgs e){}
protected void grdStudent_RowEditing(object sender, GridViewEditEventArgs e){}
public class Item
{
public int Id { get; set; }
public string Name { get; set; }
}
public static IList<Item> Collection = new List<Item>
{
new Item {Id = 1, Name = "One"},
new Item {Id = 2, Name = "Two"},
new Item {Id = 3, Name = "Three"}
};
}
}
This will work better for confirmation message box at Client side:
if (e.Row.RowType == DataControlRowType.DataRow)
{
// reference the Delete LinkButton
LinkButton lb = (LinkButton)e.Row.Cells[0].Controls[2];
if (lb.Text == "Delete")
{
lb.OnClientClick = "return confirm('Are you sure you want to delete this row?');";
}
}

focus a div on link button click

In my page, I have a gridview with link buttons in a column.
By clicking the link button should show a div below the gridview.
I gave href in onClientClick event of the link button as follows.
function showDiv() {
location.href = '#div1';
}
When I click the link button the div is showing, but after the page load the page goes up.
aspx code
<asp:GridView ID="gridDate" runat="server" CssClass="gridview_Order"
HeaderStyle-BackColor="#09182F" HeaderStyle-ForeColor="#ffffff"
AutoGenerateColumns="false" Visible="False">
<Columns>
<asp:TemplateField ItemStyle-Width="20%" HeaderText="Sl No." ItemStyle-CssClass="paddng">
<ItemTemplate>
<%#Container.DataItemIndex+1 %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-Width="25%" HeaderText="DATE" ItemStyle-CssClass="paddng">
<ItemTemplate>
<asp:LinkButton ID="lbtnDate" runat="server" CommandArgument='<%#Eval("tblName") %>' Text='<%# Eval("dtvar") %>' OnClientClick="showDiv()" OnCommand="lbtnDate_Click"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-Width="25%" HeaderText="" ItemStyle-CssClass="paddng">
<ItemTemplate>
<asp:LinkButton ID="lbtnDownload" runat="server" Text="Download Excel" CommandArgument='<%# Eval("tblName") %>' OnCommand="lbtnDownload_Click"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<br /><hr /><br />
<div id="div1">
<asp:GridView ID="gridOrderByUser" runat="server" CssClass="gridview"
HeaderStyle-BackColor="#09182F" HeaderStyle-ForeColor="#ffffff"
AutoGenerateColumns="false" Visible="False" >
<Columns>
<asp:TemplateField ItemStyle-Width="2%" HeaderText="Sl No.">
<ItemTemplate>
<asp:Label ID="lblSlNo1" runat="server" Text='<%#Container.DataItemIndex+1 %>' style="color:#000;"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="cod" HeaderText="CODE" InsertVisible="False" ReadOnly="True" SortExpression="cod" ItemStyle-Width="16%" />
<asp:TemplateField HeaderText="IMAGE" ItemStyle-Width="18%">
<ItemTemplate>
<asp:Image ID="img1" runat="server" Height="100px" Width="54px" ImageUrl='<%#"~/images/"+Eval("Image") %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
So what should I do for staying the page in the div position.
Thanks
If you dont need the server side event of the link button you could do this:
OnClientClick="location.href = '#div1'; return false;"

How to add ItemTemplate to a gridview programatically

I am trying add multiple images to a column in a data grid view in ASP.net using C#
the image names are in the database and some Users will have 10 images and others will have no images and some will be somewhere inbetween.
I figured out I can add an ItemTemplate but what I want is on load to generate the number programmatically,
is this possible
<asp:GridView ID="dgvTopPlayers" runat="server" AutoGenerateColumns="False"
onrowdatabound="dgvTopPlayers_RowDataBound"
onrowcreated="dgvTopPlayers_RowCreated" ShowHeaderWhenEmpty="True">
<Columns>
<asp:HyperLinkField DataNavigateUrlFields="UserID"
DataNavigateUrlFormatString="~/UserProfile.aspx?UserId={0}"
DataTextField="UserName" HeaderText="UserName"
/>
<asp:BoundField DataField="Last7Days" HeaderText="Last7Days" />
<asp:BoundField DataField="LastMonth" HeaderText="LastMonth" />
<asp:BoundField DataField="TotalPoints" HeaderText="TotalPoints" />
<asp:BoundField DataField="IdeaCount" HeaderText="IdeaCount" />
<asp:BoundField DataField="ChallengeCount" HeaderText="ChallengeCount" />
<asp:TemplateField HeaderText="Badges" >
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Eval("BadgeIcons") %>'
Tooltip='<%# Eval("BadgeIcons") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Image ID="Image1" runat="server" AlternateText='<%# Eval("BadgeIcons") %>'
ImageUrl='<%# Eval("BadgeIcons") %>' />
<asp:Image ID="Image2" runat="server" AlternateText='<%# Eval("BadgeIcons") %>'
ImageUrl="~/Images/puzzleIcon.png" />
<asp:Image ID="Image3" runat="server" AlternateText='<%# Eval("BadgeIcons") %>'
ImageUrl="~/IMAGES/caution.png" />
<asp:Image ID="Image4" runat="server" AlternateText='<%# Eval("BadgeIcons") %>'
ImageUrl="~/IMAGES/reportabuse.png" />
<asp:Image ID="Image5" runat="server" AlternateText='<%# Eval("BadgeIcons") %>'
ImageUrl="~/IMAGES/yellow_star.png" />
</ItemTemplate>
<ItemStyle Width="35%" />
</asp:TemplateField>
</Columns>
</asp:GridView>
Place a panel or placeholder inside ItemTemplate, and add images inside RowDataBound since you already have it.
<asp:TemplateField HeaderText="Badges" >
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Eval("BadgeIcons") %>'
Tooltip='<%# Eval("BadgeIcons") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Panel ID="ImagePanel".../>
</ItemTemplate>
</asp:TemplateField>
void dgvTopPlayers_RowDataBound(Object sender, GridViewRowEventArgs e)
{
if(e.Row.RowType == DataControlRowType.DataRow)
{
// *** Cast to appropiate object ***
var user = e.Row.DataItem as User;
var panel = e.Row.FindControl("ImagePanel") as Panel;
var images = user.BadgeIcons.Split(',');
foreach(var img in images) {
panel.Controls.Add(new Image{ ID = UniqueID, ImageUrl = "~/IMAGES/" + img });
}
}
}

How to use a buttonfield in a gridview

I am using this gridview:
<asp:GridView ID="gvMessages" runat="server" AutoGenerateColumns = "false"
CaptionAlign="NotSet" CellPadding="5" onrowcommand="gvMessages_RowCommand">
<Columns>
<asp:TemplateField HeaderText="Avändare">
<ItemTemplate>
<%# GetSender((int)Eval("Sender"))%>
<br />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Ämne">
<ItemTemplate>
<%# Eval("Head")%>
<br />
</ItemTemplate>
</asp:TemplateField>
<asp:ButtonField Text="Öppna" CommandName="Open" />
</Columns>
</asp:GridView>
I want a textbox to show the message member of the bound object (Eval("Message")) of the row that has been clicked.
from the comments, and I would suggest to have the show/hide in the client, so you can save a round trip to the server
<asp:GridView ID="gvMessages" runat="server" AutoGenerateColumns = "false"
CaptionAlign="NotSet" CellPadding="5">
<Columns>
<asp:TemplateField HeaderText="Avändare">
<ItemTemplate>
<%# GetSender((int)Eval("Sender"))%>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField HeaderText="Ämne" DataField="Head" />
<asp:TemplateField HeaderText="Avändare">
<ItemTemplate>
<button class="btn-showmsg">Öppna</button>
<div class="message hide">
<asp:TextBox runat="server"
TextMode="MultiLine" Text="<%= Eval("Message") %>" />
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
and in javascript
$(function() {
$(".btn-showmsg").click(function() {
var tr = $(this).closest("tr"), // the <tr>
msg = tr.find(".message"); // the div wraping the message
msg.show(); // show it
});
});
Now, the position and the placement of the message, it's all up to you, but I would suggest something like Bootstrap Modal to show it.
also, remember to add a style of .hide { display: none; }

Resources