Question

我试图在手风琴中显示一个模态，但是每当我单击模态按钮时，屏幕就会变成灰色，模态最终不显示。

这是我的代码：

@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

Answer 1

您对页面上的多个HTML元素使用相同的id：

# Create the docker group and add your user to the docker group
groupadd docker
usermod -aG docker $USER
newgrp docker

# Configure docker service to be exposed
mkdir -p /etc/systemd/system/docker.service.d
echo -e '[Service]\nExecStart=\nExecStart=/usr/bin/dockerd -H fd:// -H tcp://0.0.0.0:2376' >> /etc/systemd/system/docker.service.d/override.conf

# restart service
systemctl daemon-reload
service docker restart

这意味着这些切换：

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>

并将您的定位元素调整为：

id

Bootstrap模式显示灰色背景

1 个答案: