ModalPopupExtender is not perfect, or it's my mistake?

Question

User-909867351 posted

Hi

I'm using the ModalPopupExtender on my website http://cheirabem.com and it's ok but there are some issues. My modal is connected to gridview I don't use panel because I need to make it responsive. Here is my code:

<!-- inicio das coisas do shipping costs -->
                        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                        <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" BackgroundCssClass="modalBackground" PopupControlID="Gridview1" TargetControlID="HyperLink1" ></ajaxToolkit:ModalPopupExtender>                                                   
                            <asp:GridView ID="GridView1" CssClass="table table-hover table-striped pnlBackGround" GridLines="None"  runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1">
                                <Columns>
                                    <asp:TemplateField SortExpression="bandeira">
                                        <EditItemTemplate>
                                            <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("bandeira") %>'></asp:TextBox>
                                        </EditItemTemplate>
                                        <ItemTemplate>
                                            <asp:Image ID="Image12" runat="server" Height="71px" ImageUrl='<%# Eval("bandeira") %>' Width="63px"  />
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:BoundField DataField="paises" HeaderText="Country" SortExpression="paises">
                                    <ItemStyle Font-Size="X-Small" />
                                    </asp:BoundField>
                                    <asp:BoundField DataField="tipo" HeaderText="Service" SortExpression="tipo" >
                                    <ItemStyle Font-Size="XX-Small" />
                                    </asp:BoundField>
                                    <asp:BoundField DataField="preco" HeaderText="Price" SortExpression="preco" DataFormatString="{0:c}" >
                                    <ItemStyle Font-Bold="True" ForeColor="Red" Font-Size="X-Small" />
                                    </asp:BoundField>
                                    <asp:TemplateField ShowHeader="False">
                                        <ItemTemplate>
                                            <asp:Button ID="Button1" runat="server" CausesValidation="false" CommandName="" OnClick="Button1_Click" Text="Close" />
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                </Columns>
                            </asp:GridView>
                            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:produtos %>" ProviderName="<%$ ConnectionStrings:produtos.ProviderName %>" SelectCommand="select * from shipping order by id"></asp:SqlDataSource>                                                  
                        <!-- fim das coisas do shipping costs -->

First when I come to adrress I see the gridview (You can check it http://cheirabem.com option Shipping costs (Europe)) and when I hit the close button I see it again.

Any help to make it better?

Regards

Answer 1

User-909867351 posted

The situation it's better now

I made the following modifications:

1- Gridview visible to false

2- One button who opens the modal with the code:

 protected void LinkButton2_Click(object sender, EventArgs e)
    {
        GridView1.Visible = true;
        ModalPopupExtender1.Show();
    }

3- one button to close the modal

 protected void Button1_Click(object sender, EventArgs e)
    {
        GridView1.Visible = false;
        ModalPopupExtender1.Hide();
    }

But it seems when the popup opens it opens on the left of the screen and moved to center of the screen. It's not professional

Answer 2

User61956409 posted

Hi mariolopes,

Firstly, as you said, we could set GridView.Visible property to false by default, and dynamically show/hide GridView by setting Visible property.

Secondly, you could try to show modal first, then show GridView.

protected void LinkButton2_Click(object sender, EventArgs e)
{
    ModalPopupExtender1.Show();
    GridView1.Visible = true;
}

Or you could try to use jQuery Modal plugins.

Best Regards,

Fei Han