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

Question

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

Navigation

#1 by (1 votes)

0

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

I read that it can be solved by placing an updatepanel inside the body of the modal 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# bootstrap asp.net

asked by sunflower 26.03.2018 в 19:02

source

1 answer

Error photos with poor Android quality error when querying in mysql from php Warning: mysqli_fetch_array () expects parameter 1 to be mysqli_result, boolean given in

score 1 · Accepted Answer

Anything you tell me, remember that the Ids you put on the server change when you're 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>