1

Al momento de darle click al boton de editar, el modal me queda de la siguiente forma.

Haciendo que no se vea mi contenido (que la estructura basica es de otro modal, que si me sirve bien). Y al momento de poner el "id" del modal que si sirve en el boton de editar, me lo corre de manera correcta.

modal html:

<div id="modalEditarProducto" class="modal fade" role="dialog">

<div class="modal-dialog">

<div class="modal-content">

  <form role="form" method="post">

    <!--=====================================
    CABEZA DEL MODAL
    ======================================-->

    <div class="modal-header" style="background:#3c8dbc; color:white">

      <button type="button" class="close" data-dismiss="modal">&times;</button>

      <h4 class="modal-title">Editar Producto</h4>

    </div>

    <!--=====================================
    CUERPO DEL MODAL
    ======================================-->

    <div class="modal-body">

      <div class="box-body">

        <!-- ENTRADA PARA SELECCIONAR SU CATEGORIA -->

        <div class="form-group">

          <div class="input-group">

            <span class="input-group-addon"><i class="fa fa-th"></i></span> 

            <select class="form-control input-lg" id="editarCategoria" name="editarCategoria" readonly required>

              <option id="editarCategoria"></option>

            </select>

          </div>

        </div>

        <!-- ENTRADA PARA EL NOMBRE -->

        <div class="form-group">

          <div class="input-group">

            <span class="input-group-addon"><i class="fa fa-product-hunt"></i></span> 

            <input type="text" class="form-control input-lg" id="editarNombre" name="editarNombre"  required>

          </div>

        </div>

        <!-- ENTRADA PARA EL CODIGO -->

        <div class="form-group">

          <div class="input-group">

            <span class="input-group-addon"><i class="fa fa-barcode"></i></span> 

            <input type="text" class="form-control input-lg" id="editarCodigo" name="editarCodigo" readonly required>

          </div>

        </div>         

        <!-- ENTRADA PARA LA CANTIDAD -->

        <div class="form-group">

          <div class="input-group">

            <span class="input-group-addon"><i class="fa fa-check"></i></span> 

            <input type="number" class="form-control input-lg" id="editarCantidad" name="editarCantidad" min="0" required>

          </div>

        </div>

        <!-- ENTRADA PARA PRECIO COMPRA -->

        <div class="form-group row">
          <div class="col-xs-12 col-sm-6">
            <div class="input-group">

              <span class="input-group-addon"><i class="fa fa-arrow-up"></i></span> 

              <input type="number" class="form-control input-lg" id="editarPrecioCompra" name="editarPrecioCompra" min="0" step="any" required>

            </div>
          </div>

          <!-- ENTRADA PARA PRECIO VENTA -->
          <div class="col-xs-12 col-sm-6">
            <div class="input-group">

              <span class="input-group-addon"><i class="fa fa-arrow-down"></i></span> 

              <input type="number" class="form-control input-lg" id="editarPrecioVenta" name="editarPrecioVenta" min="0" step="any" required>

            </div>

              <!-- CHECKBOX PARA PORCENTAJE -->
              <div class="col-xs-6">

                <div class="form-group">
                  <br>
                  <label>
                    <input type="checkbox" class="minimal porcentaje" checked>
                    Utilizar Porcentaje
                  </label>

                </div>

              </div>
              <!-- ENTRADA PARA PORCENTAJE -->
              <br>
              <div class="col-xs-6" style="padding:0">
                <div class="input-group">
                  <input type="number" class="form-control input-lg nuevoPorcentaje" min="0" value="40" required>

                  <span class="input-group-addon"><i-fa class="fa fa-percent"></i-fa></span>
                </div>
              </div>
            </div>

        </div>
    </div>

    <!--=====================================
    PIE DEL MODAL
    ======================================-->

    <div class="modal-footer">

      <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Salir</button>

      <button type="submit" class="btn btn-primary">Guardar Cambios</button>

    </div>

  </form>




    </div>

  </div>

</div>

boton dinamico para abrir modal.php

$botones =  "<div class='btn-group'><button type='button' class='btn btn-warning btnEditarProducto' idProducto='".$productos[$i]["id"]."' data-toggle='modal' data-target='#modalEditarProducto'><i class='fa fa-pencil'></i></button><button class='btn btn-danger btnEliminarProducto' idProducto='".$productos[$i]["id"]."' codigo='".$productos[$i]["codigo"]."'><i class='fa fa-times'></i></button></div>";
2
  • Saludos Jose, edita tu pregunta, agrega TODO tu HTML, CSS y Javascript que tenga que ver con la funcionalidad que tienes para que podamos reproducir tu escenario, detectar el problema y darte una buena solución.
    – fredyfx
    Commented el 27 feb. 2019 a las 5:16
  • listo fred, ojala sea de ayuda
    – jose
    Commented el 27 feb. 2019 a las 5:31

4 respuestas 4

0

Creo que el problema puede estar en la composición del botón para abrir el modal. El fallo tambien podria ser por que este bootstrap en modo local. Te recomiendo utilizar siempre que dispongas de internet los CDN que te da bootstrap CDN BootStrap

Aquí tienes como lo he hecho yo.

Botón: <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalEditarProducto">Editar</button>

También me he dado cuenta que hay un fallo en la composición del modal. Falta cerrar un div.

Modal corregido:

<div id="modalEditarProducto" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <form role="form" method="post">
                    <!--=====================================
                CABEZA DEL MODAL
                =====================================-->
                    <div class="modal-header" style="background:#3c8dbc; color:white">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Editar Producto</h4>
                    </div>
                    <!--=====================================
                CUERPO DEL MODAL
                =====================================-->
                    <div class="modal-body">
                        <div class="box-body">
                            <!-- ENTRADA PARA SELECCIONAR SU CATEGORIA -->
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="fa fa-th"></i></span>
                                    <select class="form-control input-lg" id="editarCategoria" name="editarCategoria" readonly required>
                                        <option id="editarCategoria"></option>
                                    </select>
                                </div>
                            </div>
                            <!-- ENTRADA PARA EL NOMBRE -->
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="fa fa-product-hunt"></i></span>
                                    <input type="text" class="form-control input-lg" id="editarNombre" name="editarNombre" required>
                                </div>
                            </div>
                            <!-- ENTRADA PARA EL CODIGO -->
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="fa fa-barcode"></i></span>
                                    <input type="text" class="form-control input-lg" id="editarCodigo" name="editarCodigo" readonly required>
                                </div>
                            </div>
                            <!-- ENTRADA PARA LA CANTIDAD -->
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon"><i class="fa fa-check"></i></span>
                                    <input type="number" class="form-control input-lg" id="editarCantidad" name="editarCantidad" min="0" required>
                                </div>
                            </div>
                            <!-- ENTRADA PARA PRECIO COMPRA -->
                            <div class="form-group row">
                                <div class="col-xs-12 col-sm-6">
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="fa fa-arrow-up"></i></span>
                                        <input type="number" class="form-control input-lg" id="editarPrecioCompra" name="editarPrecioCompra" min="0" step="any" required>
                                    </div>
                                </div>
                                <!-- ENTRADA PARA PRECIO VENTA -->
                                <div class="col-xs-12 col-sm-6">
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="fa fa-arrow-down"></i></span>
                                        <input type="number" class="form-control input-lg" id="editarPrecioVenta" name="editarPrecioVenta" min="0" step="any" required>
                                    </div>
                                    <!-- CHECKBOX PARA PORCENTAJE -->
                                    <div class="col-xs-6">
                                        <div class="form-group">
                                            <br>
                                            <label>
                                                <input type="checkbox" class="minimal porcentaje" checked>
                                                Utilizar Porcentaje
                                            </label>
                                        </div>
                                    </div>
                                    <!-- ENTRADA PARA PORCENTAJE -->
                                    <br>
                                    <div class="col-xs-6" style="padding:0">
                                        <div class="input-group">
                                            <input type="number" class="form-control input-lg nuevoPorcentaje" min="0" value="40" required>
                                            <span class="input-group-addon"><i-fa class="fa fa-percent"></i-fa></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--=====================================
                PIE DEL MODAL
                ======================================-->
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Salir</button>
                            <button type="submit" class="btn btn-primary">Guardar Cambios</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

Espero que te sirva. Un saludo.

2
  • Gracias Gonzalo, cerre bien los 2 modales que tenia y agregue el cdn y ya me sale de manera correcta el modal, gracias y saludos.
    – jose
    Commented el 28 feb. 2019 a las 4:47
  • Un gustazo poder ayudarte =) @josepedrada Commented el 28 feb. 2019 a las 8:30
0

¡Hola José! Tu modal me funciona correctamente, por favor revisa lo siguiente, en orden del que creo más probable al que creo menos probable:

  • Si tienes el modal dentro de una tabla, prueba sacándolo, a veces los modal no cargan bien cuando están dentro de tablas.
  • Que el id de ese modal aparezca una sola vez en el DOM, esto lo puedes verificar en Chrome colocando click derecho en el sitio web > inspeccionar elemento > ctrl + F y escribiendo "modalEditarProducto". Recuerda que los id no se pueden repetir, veo que tienes muchos elementos para editar y si tienes un solo modal tendrás que usar Ajax, mientras que si tienes varios tendrás que poner el id del producto al final del id del modal.
  • Que el código para el modal que estás usando sea el que corresponde para la versión de Bootstrap que estás usando.
  • Que no haya algún css afectando al modal, por ejemplo un display: none !important; donde no debería.
  • Que no haya algún js afectando al modal, por ejemplo un error o algo que esté interceptando el evento (esto lo veo muy improbable).

Espero te sea útil, ¡Suerte!

3
  • Pues los botones para abrir el modal estan dentro de un data-table, crees q haya problema en eso.
    – jose
    Commented el 27 feb. 2019 a las 6:25
  • No debería haber problema con eso, ya que el botón si está cumpliendo su trabajo (abrir el modal), lo importante es que el modal esté fuera del tag <td> y fuera del tag <table>. Commented el 27 feb. 2019 a las 6:28
  • Pues resulto que era un descuido mio de no cerrar bien los 2 modales que tenia y el que estaba bien interferia con el otro y eso hacia que no me saliera nada, pero muchas gracias por tus consejos y observaciones Sebastian.
    – jose
    Commented el 28 feb. 2019 a las 4:49
0

Yo tuve el mismo problema varias veces.. y resulta que tenia estilos en el de la tabla.. En mi caso tenia un fadeIn css y eso provocaba la pantalla oscura total.. Tambien en otra oportunidad lo resolví agregadno css en el container.

 animation-fill-mode: unset !important;
0

se que ya a pasado mucho tiempo del POST pero quiero compartir que tuve el mismo problema y fue sencillo resolver:

El error era que tenia el codigo del modal dentro de una tabla , lo saque de dicho div y listo , problema resuelto !

1
  • 1
    si es posible pon un pequeño ejemplo, de lo contrario esto no seria una buena respuesta, cuando tengas mayor reputacion podras comentar, mira como responder
    – Christian
    Commented el 21 abr. 2021 a las 18:57

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.