Open Modal by code-Behind

Asked

Viewed 819 times

1

I have a modal, #myModal, and I would like that when I click on the button, I had a condition and that if it entered Else, it would open the modal. I created this code in javascript:

 <script type="text/javascript">
         function openModal() {
             $('#myModal').modal({ show: true });
         }
    </script>

  if (cbquitado.Checked == true)
                {
                    ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('Contas a Pagar já quitada!');location='" + url + "';", true);
                    return;
                }
                else
                {
                    ScriptManager.RegisterClientScriptBlock(Page, Page.GetType(), "myModal", "openModal();", true);
                }

And this code in condition, however nothing happens, follows the modal code:

     <div class="modal fade" id="myModal" role="dialog">
                <div class="modal-dialog">

                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Pagamento</h4>
                        </div>
                        <div class="modal-body">
                            <br />
                            <asp:Label ID="lblDetalhe" runat="server" Text="Detalhes Conta a Pagar" Font-Bold="True"></asp:Label>
                            <asp:Panel ID="PainelContasaPagar" runat="server">
                                <asp:Label ID="Label5" runat="server" Text="Vencimento:" Font-Bold="True"></asp:Label>
                                <asp:Label ID="Label6" runat="server" Text="Label" Font-Bold="False"></asp:Label>
                                <br />
                                <asp:Label ID="Label7" runat="server" Text="Observações:" Font-Bold="True"></asp:Label>
                                <asp:Label ID="Label8" runat="server" Text="Label"></asp:Label>
                                <br />
                                <asp:Label ID="Label9" runat="server" Text="Valor:" Font-Bold="True"></asp:Label>
                                <asp:Label ID="Label10" runat="server" Text="Label"></asp:Label>
                            </asp:Panel>
                            <br />
                            <br />
                            <br />
                            <asp:Label ID="lblFormaPg" runat="server" Text="Forma de Pgto" Font-Bold="True"></asp:Label>
                            <asp:DropDownList ID="cbforma" runat="server">
                                <asp:ListItem>Dinheiro</asp:ListItem>
                                <asp:ListItem>Cheque</asp:ListItem>
                                <asp:ListItem>Depósito</asp:ListItem>
                            </asp:DropDownList>
                            <br />
                            <br />
                            <asp:UpdatePanel ID="UpdatePanel7" runat="server">
                                <ContentTemplate>
                                    <asp:Label ID="lblValoraPagar" runat="server" Text="Valor a Pagar"></asp:Label>
                                    <asp:TextBox ID="txtValoraPagar" runat="server" onKeyPress="return(MascaraMoeda(this,'.',',',event))" placeholder="R$" Enabled="False"></asp:TextBox>
                                    <asp:Label ID="lblDesconto" runat="server" Text="Desconto"></asp:Label>
                                    <asp:TextBox ID="txtDesconto" runat="server" onKeyPress="return(MascaraMoeda(this,'.',',',event))" placeholder="R$0,00"></asp:TextBox>
                                    <asp:Label ID="lblJuros" runat="server" Text="Juros"></asp:Label>
                                    <asp:TextBox ID="txtJuros" runat="server" onKeyPress="return(MascaraMoeda(this,'.',',',event))" placeholder="R$0,00"></asp:TextBox>

                                    <asp:Button ID="btnCalcular" runat="server" Text="Calcular" Font-Bold="True" OnClick="btnCalcular_Click" />
                                </ContentTemplate>
                            </asp:UpdatePanel>
                            <br />
                            <br />
                            <asp:UpdatePanel ID="UpdatePanel9" runat="server">
                                <ContentTemplate>
                                    <asp:RadioButton ID="rb1" runat="server" Text="Retirar da Conta" AutoPostBack="True" OnCheckedChanged="rbConta_CheckedChanged" />
                                    <asp:DropDownList ID="cbContas" runat="server"></asp:DropDownList>
                                    <asp:RadioButton ID="rb2" runat="server" Text="Retirar do Caixa" AutoPostBack="True" OnCheckedChanged="rbCaixa_CheckedChanged" />

                                </ContentTemplate>
                            </asp:UpdatePanel>
                            <br />
                            <br />
                            <asp:UpdatePanel ID="UpdatePanel8" runat="server">
                                <ContentTemplate>
                                    <asp:Label ID="lblTotalPagar" runat="server" Text="Total" Font-Bold="True"></asp:Label>
                                    <asp:TextBox ID="txtTotalPagar" runat="server"></asp:TextBox>
                                </ContentTemplate>
                            </asp:UpdatePanel>
                        </div>
                        <div class="modal-footer">
                            <asp:Button ID="Button1" runat="server" Text="Concluir" CssClass="radiusInput" OnClick="Button1_Click" />
                        </div>
                    </div>
                </div>
            </div>

  • Are you using the bootstrap modal? If so, it would be nice to inform the version.

  • <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" Integrity="sha384-Tc5iqib027qvyjsmfhjomalkfuwvxzxupncja7l2mcwnipg9mgcd8wgnicpd7txa" crossorigin="Anonymous"></script> Yes, I am using, follow the reference I use.

1 answer

1


I was able to solve the problem, which was happening due to the reference to jquery after bootstrap, I did it backwards and it worked.

 <script type="text/javascript" src="javascript/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

  • Boaa!!!!!!!!!!!!!!!!!!!!!!!!!

Browser other questions tagged

You are not signed in. Login or sign up in order to post.