Why when you open the Modal, you keep the modal class-backdrop fade in?

Question

Why when you open the Modal, you keep the modal class-backdrop fade in?

Navigation

#1 by (1 votes)

0

I have a button that when I clicked it should open a modal, but it stays with the modal-context fade in class and the modal one does not appear (I can not close it either).

The code is this:

<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>

The screen looks like this:

css bootstrap

asked by Lluís Puig Ferrer 24.10.2017 в 14:08

source

1 answer

problem getting the javascript data value Error filtering SQL query

score 1 · Accepted Answer

Place the code of the modal box <div id="formdeleteproject_{{$project->id}}" class="modal fade" role="dialog">...</div> outside of the table (in the code you have it within a <td> ).

The Boostrap documentation says that you put the modal HTML at the highest level of the document that is possible (that is, the closest to <body> ) so as not to affect the appearance or functionality.

Modal markup placement . Always try 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.