我的弹出窗口没有显示在上方，我在 laravel 中尝试了很多方法来做到这一点

Question

enter image description here

这是我的 laravel blade 代码，我想在同一页面上显示弹出窗口，它也在显示。但它不可点击，并且显示淡入淡出模型任何人都可以建议我做另一种方法，因为我也尝试过其他方法。提前谢谢你。

@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

Answer 1

您的模态框没有唯一 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">

至于可视化问题，您有两个可能的修复方法：

为您的模式添加高 z-index 值。

<div id="myModal-{{ $pop->id }}" 
     class="modal fade"
     role="dialog"
     style="z-index: 10000; /* adjust as needed */">

为您的模式添加足够的上边距以避免它与导航栏重叠

<div id="myModal-{{ $pop->id }}" 
     class="modal fade"
     role="dialog"
     style="margin-top: 20rem /* adjust as needed */;">

确保您的模态框实际位于页面末尾，并且除了 </body> 标签外没有父元素

<body>
    ....
    <div class="modal fade" ...></div>

    <script ...>...</script>
    <script ...>...</script>
    <script ...>...</script>
</body>

Answer 2

尝试更改模态 css“最高”值，也许这可以帮助

.modal {
    top: 120px;
}

或者更改.modal-dialog css

.modal-dialog {
   margin: 100px auto; }

我的弹出窗口没有显示在上方，我在 laravel 中尝试了很多方法来做到这一点

my popup not showing in upper side , i have tried many ways to do thid in laravel

php

twitter-bootstrap

laravel

bootstrap-modal

laravel-5