1

Tengo un botón que al hacer click se debería abrir un modal, pero se queda con la clase modal-backdrop fade in y no aparece el modal (tampoco puedo cerrarlo).

El codigo es este:

<td class="orderproject tdcenter"><p id="margindata">{{$project->order}}</p>
                      <div class="editdeleteproyecto editdeleteproyectoinsideorden">
                          <a href="{{ route('admin.project.edit', $project->id)}}" class="btn btn-success btn-sm editmenuproject" id="margindata">Edit</a> 
                          <button type="button" class="btn btn-danger btn-sm deletemenuproject" data-toggle="modal" data-target="#formdeleteproject_{{$project->id}}" id="margindata">Delete</button>

                          <div id="formdeleteproject_{{$project->id}}" class="modal fade" role="dialog"> <!-- DIV TO SHOW THE CREATE PROJECT FORM 1 START HERE-->
                             <div class="modal-dialog" style="background-color:#23517F;">
                             <div class="modal-content" style="background-color:#23517F;">
                             <div class="modal-header">
                               <button type="button" class="close" data-dismiss="modal">&times;</button>
                               <h4 class="modal-title" style="color:black;">¿Estas seguro de borrar el proyecto?</h4>
                             </div>
                             <div class="modal-body">
                              <div class="col-sm-6">
                                <a href="{{ route('admin.projects') }}" class="btn btn-danger btn-block colsm6btnno">No</a>
                              </div>
                              <div class="col-sm-6">
                               <form method="POST" action="{{route('admin.projects.destroy',$project->id)}}">
                                <input type="submit" value="Si" class="btn btn-danger btn-block colsm6btnsi">
                                <input type="hidden" name="_token" value="{{Session::token()}}">
                                {{method_field('DELETE')}}
                               </form>
                              </div>
                             </div>
                            <div class="modal-footer">
                              <button type="button" class="btn btn-default" data-dismiss="modal" id="closemodal">Close</button>
                            </div>
                         </div>
                         </div>
                         </div>
                      </div>
</td>

La pantalla se ve así:

introducir la descripción de la imagen aquí

1
  • 1
    Trata de armar un fiddle con tu código (añadiendo los scripts y estilos) para poder recrear el problema
    – ffflabs
    Commented el 24 oct. 2017 a las 12:09

1 respuesta 1

1

Coloca el código del cuadro modal <div id="formdeleteproject_{{$project->id}}" class="modal fade" role="dialog">...</div> fuera de la tabla (en el código lo tienes dentro de un <td>).

La documentación de Boostrap dice que coloques el HTML del modal en el nivel más alto del documento que sea posible (o sea, lo más cerca de <body>) para no afectar la apariencia o funcionalidad.

Modal markup placement. Always try to place a modal's HTML code in a top-level position in your document to avoid other components affecting the modal's appearance and/or functionality.

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.