Bootstrap modal displays grey background - php

Question

I am trying to display a modal in an accordion but whenever I click on the modal button, the screen becomes grey and the modal ends up not showing.
This is my code:
#if(isset($data))
<div class="panel-group" id="accordion">
#foreach($data as $datum)
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#{{$datum['id']}}">
{{ucfirst($datum['username'])}}</a>
</h4>
</div>
<div id="{{$datum['id']}}" class="panel-collapse collapse">
<div class="panel-body">
Current balance: {{$datum['wallet']['balance']}} <br>
<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#{{$datum['id']}}">Transfer</button>
<!-- Modal -->
<div id="{{$datum['id']}}" class="modal fade in" role="dialog" >
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Transfer Funds</h4>
</div>
<div class="modal-body">
<div class="col-md-3">
<label>Amount</label>
<input type="number" name="amount" class="form-control" placeholder="Amount to be transferred">
</div>
<input type="text" name="sub_agent" value="{{$datum['username']}}">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
#endforeach
</div>
#endif

Answer 1

You're using the same id="{{$datum['id']}}" for multiple HTML elements on your page:
<div id="{{$datum['id']}}" class="panel-collapse collapse">
...
<div id="{{$datum['id']}}" class="modal fade in" role="dialog">
Which means that these toggles:
<a data-toggle="collapse" data-parent="#accordion" href="#{{$datum['id']}}">
<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#{{$datum['id']}}">Transfer</button>
Don't know what to target. Remember: in HTML, id attributes must be unique.
Try changing to the following:
<div id="{{$datum['id']}}_collapse" class="panel-collapse collapse">
...
<div id="{{$datum['id']}}_modal" class="modal fade in" role="dialog">
And adjust your targeting elements to:
<a data-toggle="collapse" data-parent="#accordion" href="#{{$datum['id']}}_collapse">
<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#{{$datum['id']}}_modal">Transfer</button>