Home / Questions / 150527
Accepted
sunflower
Asked: 2020-03-27 09:02:01 +0800 CST 2020-03-27 09:02:01 +0800 CST

How to avoid closing a modal after executing the event of a button (inside the modal)?

  • 772

I have a bootstrap modal which contains a textbox and a numeric keypad inside, so when you click on a button, you must "type" the number of the button in the textbox. The problem is that clicking any button (on the modal's keyboard) closes the modal. The number does stay written but to see it I have to open the modal again. Is there a way to make the modal not close?

I read that it can be solved by placing an updatepanel inside the modal body to avoid autopostback... but I have no idea how.

<!--VENTANA MODAL -->  
<div class="modal fade" id="recep"  tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header" style="align-content:center">
<h2 class="modal-title" id="exampleModalLabel">TITULO MODAL</h2>
</div>
<div class="form-group" >
<div class="modal-body" style="align-content:center;">
        
<h2 style="text-align: justify">Ingrese un numero:</h2>
<!--teclado numerico -->
<asp:Button ID="b0" runat="server" Text="0" OnClick="b0_Click"/>
<asp:Button ID="b1" runat="server" Text="1" OnClick="b1_Click"/>
<asp:... etc...

<!--textbox -->
<asp:textbox id="sem" runat="server" autocomplete="off"></asp:textbox>	
</div>
</div>

<!--cerrar -->
<div class="modal-footer" style="align-content:center">
<asp:Button id="cr" runat="server"  data-dismiss="modal" text="CANCELAR" />

<!--guardar-->
<asp:Button id="RR" runat="server" text="ACEPTAR" OnClick="RR_Click"/>
</div>
</div>
</div>
</div>
	 <!--VENTANA MODAL -->
   

webform aspx.cs
  protected void b0_Click(object sender, EventArgs e)
        {

                sem.Text = sem.Text + "0";
       }
Thank you for reading.

c#

1 Answers

  1. Best Answer

    Anything you let me know, remember that the Ids you put on the server change when you are in the browser.

    <!--VENTANA MODAL -->
<div class="modal fade" id="recep" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header" style="align-content: center">
                <h2 class="modal-title" id="exampleModalLabel">TITULO MODAL</h2>
            </div>
            <div class="form-group">
                <div class="modal-body" style="align-content: center;">

                    <h2 style="text-align: justify">Ingrese un numero:</h2>
                    <!--teclado numerico -->
                    <button id="b0" type="button">0</button>
                    <button id="b1" type="button">1</button>

                    <!--textbox -->
                    <asp:TextBox ID="sem" runat="server" autocomplete="off"></asp:TextBox>
                </div>
            </div>

            <!--cerrar -->
            <div class="modal-footer" style="align-content: center">
                <button id="cr" data-dismiss="modal">CANCELAR</button>

                <!--guardar-->
                <asp:Button ID="RR" runat="server" Text="ACEPTAR" OnClick="RR_Click" /> <%--Aquí podrías redireccionar a otra página con un mensaje de confirmación--%>
            </div>
        </div>
    </div>
</div>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#recep">
  lanzar modal
</button>
 <script src="Scripts/jquery-3.0.0.js"></script>
        <script src="Scripts/jquery-3.0.0.min.js"></script>
<script>
    $("#b0").on("click", function () {
        $("#head_sem").val($("#head_sem").val() + "0"); 
        // En mi caso el ID es MainContent_sem, sí no funciona inspeciona la página y mira que ID tiene tu textBox
    });
    $("#b1").on("click", function () {
        $("#head_sem").val($("#head_sem").val() + "1");
        // En mi caso el ID es MainContent_sem, sí no funciona inspeciona la página y mira que ID tiene tu textBox
    });
</script>
    • 1