В модальном окне bootstrap отображается серый фон

Я пытаюсь отобразить модальное окно в аккордеоне, но всякий раз, когда я нажимаю на кнопку модального окна, экран становится серым, а модальное окно не отображается.

Это мой код:

@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">&times;</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
0
0
655
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы используете один и тот же id="{{$datum['id']}}" для нескольких элементов HTML на своей странице:

<div id="{{$datum['id']}}" class="panel-collapse collapse">
...
  <div id="{{$datum['id']}}" class="modal fade in" role="dialog">

Это означает, что эти переключатели:

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

Не знаю, на что нацеливаться. Помните: в HTML атрибуты id должны быть уникальными.

Попробуйте изменить на следующее:

<div id="{{$datum['id']}}_collapse" class="panel-collapse collapse">
...
  <div id="{{$datum['id']}}_modal" class="modal fade in" role="dialog">

И настройте элементы таргетинга на:

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

Другие вопросы по теме