Bootstrap modal displays grey background

shekwo

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">&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
Tim Lewis

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>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Make bootstrap modal draggable and keep background usable

Bootstrap modal: background jumps to top on toggle

Bootstrap modal appearing under background

BootStrap Modal background scroll on iOS

Bootstrap 3 modal shows a transparent background

Bootstrap 3 modal background is missing

Bootstrap modal background won't disappear

bootstrap-ui modal not showing the grey background behind it, (modal-backdrop class is not added on open)

google map appear with grey inside modal in bootstrap

Enable background when open Bootstrap modal popup

Background image in bootstrap modal

Bootstrap modal enable background

Enable background use with modal open in Bootstrap 4

how to create bootstrap modal with transparent background

background pixels flickering on bootstrap modal

Strange Grey Button Background on Mobile Only with Bootstrap

bootstrap modal displays twice

Bootstrap 4 Modal Background not responsive on mobile

SlickGrid in Bootstrap modal displays data only first two columns

Twitter Bootstrap Modal - Grey background but no window

Modal under background fade bootstrap

Bootstrap modal lightbox showing scrollbar background

Not able to change the background color of bootstrap modal

bootstrap modal background black

Bootstrap modal with opacity appearing behind the background

Why my react-bootstrap modal component displays like that?

How to change background color of react bootstrap modal

Make background dark grey when react native Modal is opened

Angular material button always has a grey background anytime the modal is opened