0

Tengo una ventana modal que se abre haciendo clic en un botón pero cuando la abro se cierra al instante, no llega ni a un segundo abierta. Leí en algún foro que agregando el type button al botón solucionaba el problema pero no resultó. Probé con input y tampoco me funcionó.

El botón es el siguiente:

<button class="btn btn-success btn-sm" type="button" data-toggle="modal" data-target="#loginFrm3"><span class="icon fa-print"> 
        </span>Listado</button>

El modal es el siguiente:

<!-- filtro para impresion de pop up-->

<div class="modal fade" id="loginFrm3" tabindex="-1" role="dialog" data-backdrop=”static” data-keyboard=”false” aria-labelledby="loginFrm" aria-hidden="true" position="fixed">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <!-- Form Name -->
        <h4>Impresion de Listado de Participantes</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">×</span>
                                    </button><br>
      </div>
      <div class="modal-body">
        <div id="register_form" style="padding-left: 20%; padding-right: 20%; padding-top: 5%; padding-bottom: 5%">
          <form class="form-horizontal" name="register" method="post" action="">

            <!-- Text input-->
            <div class="form-group">
              <label>Seleccione el listado a imprimir:</label>
              <br>
              <a class="btn btn-success btn-lg btn-block icon fa-save" target="_blank" type="submit" name="submit" style="color: white" href="impresion_listado_participantes_fpdf.php?estado=TODOS"> Imprimir TODOS</a>
              <a class="btn btn-success btn-lg btn-block icon fa-save" target="_blank" type="submit" name="submit" style="color: white" href="impresion_listado_participantes_fpdf.php?estado=Pagado"> Imprimir Pagos</a>
              <a class="btn btn-success btn-lg btn-block icon fa-save" target="_blank" type="submit" name="submit" style="color: white" href="impresion_listado_participantes_fpdf.php?estado=No-pago"> Imprimir No Pagados</a>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- filtro para impresion de pop up -->

1 respuesta 1

2

Tienes errado el uso de comillas dobles en el div del modal, justo en los atributos data-backdrop=”static” data-keyboard=”false”. Cambia estas comillas por estas "

Puedes probar con el ejemplo que te dejo acá.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title></title>
  </head>
  <body>
     
    <button class="btn btn-success btn-sm" type="button" data-toggle="modal" data-target="#loginFrm3"><span class="icon fa-print"> 
    </span>Listado</button>

    
    <!-- filtro para impresion de pop up-->

        <div class="modal fade" id="loginFrm3" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" aria-labelledby="loginFrm" aria-hidden="true" position="fixed">
  <div class="modal-dialog" role="document">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <!-- Form Name -->
                        <h4>Impresion de Listado de Participantes</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button><br>
                     </div>
                     <div class="modal-body">
                       <div  id="register_form" style="padding-left: 20%; padding-right: 20%; padding-top: 5%; padding-bottom: 5%">
                          <form class="form-horizontal" name="register" method="post" action="">

                             <!-- Text input-->
                             <div class="form-group">
                                 <label>Seleccione el listado a imprimir:</label>
                                 <br>
                                 <a class="btn btn-success btn-lg btn-block icon fa-save" target="_blank" type="submit" name="submit" style="color: white" href="impresion_listado_participantes_fpdf.php?estado=TODOS"> Imprimir TODOS</a>
                                 <a class="btn btn-success btn-lg btn-block icon fa-save" target="_blank" type="submit" name="submit" style="color: white" href="impresion_listado_participantes_fpdf.php?estado=Pagado"> Imprimir Pagos</a>
                                 <a class="btn btn-success btn-lg btn-block icon fa-save" target="_blank" type="submit" name="submit" style="color: white" href="impresion_listado_participantes_fpdf.php?estado=No-pago"> Imprimir No Pagados</a>
                             </div>
                         </form>
                       </div>
                    </div>
                 </div>
             </div>
        </div>

  <!-- filtro para impresion de pop up -->

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

4
  • Es correcto, el error es tipográfico, está usando comillas simples en lugar de comillas rectas. +Info. También es recomendable que revise su código pues tiene varias etiquetas obsoletas. Commented el 3 jul. 2019 a las 12:47
  • @JheymanMejia a qué "etiquetas obsoletas" te referís?
    – azeós
    Commented el 4 jul. 2019 a las 3:40
  • 2
    @azeós hay tres atributos name dentro de las etiquetas a. En su lugar se recomienda hacer uso de atributos id. Tampoco se debe usar el atributo type="submit" en elementos diferentes a un botón. Commented el 4 jul. 2019 a las 3:47
  • @JheymanMejia perfecto, estaba buscando etiquetas obsoletas y no miré los atributos, gracias.
    – azeós
    Commented el 4 jul. 2019 a las 3:50

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.