1

enter image description here

this is my laravel blade code, I want to show the popup on the same page, it is showing also. But it is not clickable, and shows fade model can anyone suggest me to do another method, as I have tried other's method also. Thank you in advance.

@foreach($popup as $pop)
  <div class="popup col-md-3">
    <div class="contain">
      <img src="{{ $pop->front_layout }}" alt="Avatar" class="image" style="width:100%">
      <div class="middle">
        <a class="btn btn-warning"  data-toggle="modal" data-target="#myModal">Preview</a>
      </div>
    </div>
    {{--<div class="pops" id="{{ $pop->id }}">
      {!! $pop->website !!}
    </div>--}}
  </div>
  <div id="myModal" class="modal fade" 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">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
@endforeach
IGP
  • 14,160
  • 4
  • 26
  • 43
Shivangi rawat
  • 23
  • 1
  • 6

2 Answers2

0

Your modals don't have a unique id.

<a class="btn btn-warning" 
   href="#loginbutton"
   data-toggle="modal"
   data-target="#myModal-{{ $pop->id }}">Preview</a>

<div id="myModal-{{ $pop->id }}" 
     class="modal fade"
     role="dialog">

As for the visualization problem you've got two possible fixes:

  1. Add a high z-index value to your modal.
<div id="myModal-{{ $pop->id }}" 
     class="modal fade"
     role="dialog"
     style="z-index: 10000; /* adjust as needed */">
  1. Add enough top margin to your modal to avoid having it overlap with the navbar
<div id="myModal-{{ $pop->id }}" 
     class="modal fade"
     role="dialog"
     style="margin-top: 20rem /* adjust as needed */;">
  1. Make sure your modal is actually at the end of the page and has no parent elements besides the </body> tag
<body>
    ....
    <div class="modal fade" ...></div>

    <script ...>...</script>
    <script ...>...</script>
    <script ...>...</script>
</body>
IGP
  • 14,160
  • 4
  • 26
  • 43
0

try to change modal css "top" value, Maybe this can help

.modal {
    top: 120px;
}

Or change .modal-dialog css

.modal-dialog {
   margin: 100px auto; }
Satish Modha
  • 759
  • 1
  • 4
  • 8