locked
Modal Window RRS feed

  • Question

  • User-401818107 posted

    I have the coding below:

    <script type="text/javascript">
    var popUpObj;
    function showModalPopUp() {
    popUpObj = window.open("product.aspx?id=<%# DataBinder.Eval(Container.DataItem, "idProduct") %>",
    "ModalPopUp",
    "toolbar=no," +
    "scrollbars=no," +
    "location=no," +
    "statusbar=no," +
    "menubar=no," +
    "resizable=0," +
    "width=500," +
    "height=500," +
    "left = 490," +
    "top=300"
    );
    popUpObj.focus();
    LoadModalDiv();
    }

    </script>
    <script type="text/javascript">
    function LoadModalDiv() {
    var bcgDiv = document.getElementById("divBackground");
    bcgDiv.style.display = "block";
    }
    </script>
    <script type="text/javascript">
    function HideModalDiv() {
    var bcgDiv = document.getElementById("divBackground");
    bcgDiv.style.display = "none";
    }
    function OnUnload() {
    if (false == popUpObj.closed) {
    popUpObj.close();
    }
    }
    window.onunload = OnUnload;
    </script><br />
    <a href="javascript:showModalPopUp()">Open My Window</a>

    1. Error:

    'DataItem' is not a member of 'System.Web.UI.Page'.

    How to fix popUpObj = window.open("product.aspx?id=<%# DataBinder.Eval(Container.DataItem, "idProduct") %>"

    2. How to change the background color to gray

    Thank you!

    Monday, November 19, 2018 9:40 PM

Answers

  • User283571144 posted

    Hi Jessy,

    Jessy

    1. Error:

    'DataItem' is not a member of 'System.Web.UI.Page'.

    How to fix popUpObj = window.open("product.aspx?id=<%# DataBinder.Eval(Container.DataItem, "idProduct") %>"

     Since the Container.DataItem only work inside the gridview, we couldn't use it outside the gridview in a javascript function.

    If we want to get the id in the function, we could use javascript function to get the heyperlink's src inside the girdview, then we could use windows.open open the src.

    Jessy

    2. How to change the background color to gray

    According to your description, I suggest you could try to use the model popup instead of the winodws.open in your page.

    By using model popup, we could easily show a new window on your page instead of open a new one and auto gray the background page. If you close the model popup window, it will auto white the page.

    More details, you could refer to below codes:

    GridviewPage.Aspx

    <!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 code-behind:

            protected void Page_Load(object sender, EventArgs e)
            {
                string s = Request["id"];
                Response.Write(s);
            }

    Result:

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 20, 2018 5:42 AM