在旋转木马中使用时，模态失去了z-index

Question

我在我的ruby on rails项目中使用Materialisecss。我试图在旋转木马中使用模态。旋转木马似乎工作正常，但我点击图像打开模态。它没有保留其z指数。黑色布局覆盖整个屏幕。这是我的代码：

<div class="carousel">
  <% examples.each_with_index do |example,index| %>
    <a class="carousel-item modal-trigger" href="#example-video-<%= index %>">
      <%= image_tag vimeo_api(VideoInfo.new("#{example.video}").video_id, "thumbnail_url_with_play_button"), class: 'responsive-img' %>
    </a>
    <div id="example-video-<%= index %>" class="modal">
      <div class="modal-content">
        <div class="">
          <%= vimeo_api(VideoInfo.new("#{example.video}").video_id, "html").html_safe %>
        </div>
      </div>
    </div>
  <% end  %>
</div>

如果我使用相同的模态而没有轮播，它可以正常工作。我附上了参考的截图。