Pop Window
Question
All replies
-
User283571144 posted
Hi Jessy,
Do you mean you want to know how to open a new window, when click the hyperlink?
If this is your requirement, I suggest you could use javascript window.open function to achieve your requirements.
More details, you could refer to below codes:
<head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div> <asp:GridView ID="GridView1" runat="server" ShowFooter="true"> <Columns><asp:TemplateField> <ItemTemplate> <a href="about.aspx?id=<%# DataBinder.Eval(Container.DataItem,"idProduct") %>" onclick="myWindow = window.open('about.aspx?id=<%#DataBinder.Eval(Container.DataItem,"idProduct") %>','', 'modal=yes');myWindow.focus(); return false ">Launch modal</a> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </div> </form></body>Result:
Best Regards,
Brando
-
User283571144 posted
Hi Jessy,
According to your description and codes, I found you use wrong quote in the javascript function.
I suggest you could try to use below codes:
<a href="about.aspx?id=<%# DataBinder.Eval(Container.DataItem, "idProduct") %>" onclick="myWindow =window.open('about.aspx?id=<%# DataBinder.Eval(Container.DataItem, "idProduct") %>',' ','width=50,height=50');myWindow.focus(); return false ">
<img style=" border: 1px solid gray;" src="images/<%# DataBinder.Eval(Container.DataItem, "idProduct") %>.jpg"></a>Besides, windows.open just open a new window, your previous will not change, if you want to show a model popup window and gary the default window instead of open a new window, I suggest you could try to use bootstarp model popup.
You could set a iframe in your page and set its link according to your click hyperlink src.
More details, you could refer to below demo:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title><script src="../Scripts/jquery-3.3.1.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <%-- add code to add reference --%> <script> window.onload = function () { $(".a1").click(function (){ $("#if1").attr("src", "about.aspx?id=" + $(this).attr('href')); }) } </script> </head> <body> <form id="form1" runat="server"> <div> <asp:GridView ID="GridView1" runat="server"> <Columns> <asp:TemplateField> <ItemTemplate> <a class="a1" href="<%# DataBinder.Eval(Container.DataItem,"idProduct") %>" data-toggle="modal" data-target="#exampleModal"><img style=" border: 1px solid gray;" src="images/<%# DataBinder.Eval(Container.DataItem, "idProduct") %>.jpg"></a> </itemTemplate> </asp:TemplateField> </Columns> </asp:GridView> <div class="modal fade" id="exampleModal" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body" id="content"> <iframe src="about.aspx" id="if1" style=" height:400px; width:470px"></iframe><%--use iframe to add your page here and you can alsoset the size here --%> </div> </div> </div> </div> </div> </form> </body> </html>Code-behind:
protected void Page_Load(object sender, EventArgs e) { DataTable dt = new DataTable(); dt.Columns.Add(new DataColumn("IdProduct", typeof(Int32))); DataRow row = dt.NewRow(); row["IdProduct"] = 1; dt.Rows.Add(row); GridView1.DataSource = dt; GridView1.DataBind(); }About.aspx:
protected void Page_Load(object sender, EventArgs e) { string s = Request["id"]; Response.Write(s); }Result:
Best Regards,
Brando
-
User283571144 posted
Hi Jessy,
I suggest you could refer to below vb.net codes:
Page1:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title><script src="../Scripts/jquery-3.3.1.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <%-- add code to add reference --%> <script> window.onload = function () { $(".a1").click(function (){ $("#if1").attr("src", "about.aspx?id=" + $(this).attr('href')); }) } </script> </head> <body> <form id="form1" runat="server"> <div> <asp:GridView ID="GridView1" runat="server"> <Columns> <asp:TemplateField> <ItemTemplate> <a class="a1" href="<%# DataBinder.Eval(Container.DataItem,"idProduct") %>" data-toggle="modal" data-target="#exampleModal"><img style=" border: 1px solid gray;" src="images/<%# DataBinder.Eval(Container.DataItem, "idProduct") %>.jpg"></a> </itemTemplate> </asp:TemplateField> </Columns> </asp:GridView> <div class="modal fade" id="exampleModal" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body" id="content"> <iframe src="about.aspx" id="if1" style=" height:400px; width:470px"></iframe><%--use iframe to add your page here and you can alsoset the size here --%> </div> </div> </div> </div> </div> </form> </body> </html>Code-behind:
Imports System.Data Partial Class CASE_case Inherits System.Web.UI.Page Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load Dim dt As DataTable = New DataTable() dt.Columns.Add(New DataColumn("IdProduct")) Dim row As DataRow = dt.NewRow() row("IdProduct") = 1 dt.Rows.Add(row) Dim row2 As DataRow = dt.NewRow() row2("IdProduct") = 2 dt.Rows.Add(row2) GridView1.DataSource = dt GridView1.DataBind() End Sub End ClassPage2:
Code-behind:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load Dim s As String = Request.QueryString("id") Response.Write(s) End SubResult:
Best Regards,
Brando
