I have an index view, from which I have 3 buttons that should open three different modals, but it only opens one, if I delete two and leave only one (any of the three buttons) it does open and they work, but if I put them together they don't open all three only one, does anyone know why? I've been trying to know the causes of the error for days but I can't, here I show the code:
<td>
<a href="" data-target="#modal-uno-{{$cat->id}}" data-toggle="modal"><button class="btn btn-info">UNO</button></a>
<a href="" data-target="#modal-dos-{{$cat->id}}" data-toggle="modal"><button class="btn btn-success">DOS</button></a>
<a href="" data-target="#modal-delete-{{$cat->id}}" data-toggle="modal"><button class="btn btn-danger">Eliminar</button></a>
</td>
@include('FOLDER1.FOLDER2.uno')
@include('FOLDER1.FOLDER2.dos')
@include('FOLDER1.FOLDER2.modal')
pass modal code
<div class="modal fade modal-right" aria-hidden="true" role="dialog" tabindex="-1" id="modal-dos-{{$cat->id}}">
{{Form::Open(array('action'=>array('CategoryController@uno',$cat->id),'method'=>'uno'))}}
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Editar</h4>
</div>
<label for="producto">Camion</label>
<input type="text" name="porducto" class="form-control" placeholder="" value="{{$producto}}"></input readonly>
<div class="form-group">
<div class="modal-body">
<p>Confirme si desea editar </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
<button type="submit" class="btn btn-primary">Confirmar</button>
</div>
</div>
</div>
</div>
{{Form::Close()}}
</div>
Since this type of problem has had two questions ( here's the other one ) in the last 24 hours, and both have been solved in the same way, I'm going to include this answer.
When, using bootstrap modals , you try to launch and only the dark background appears , but not the modal itself, it is usually due to poor HTML coding within the modal , where some element lacks the correct closure within the modal.
In both questions, it has happened that it was not only a modal, but several consecutive ones , therefore they affected each other causing that error.
The solution is to check if the modals correctly open and close all their HTML elements, especially the DIVs, to avoid this anomalous behavior .