php - HTML & CSS - Modal 正在覆盖另一个 Modal

Question

我需要解决这个问题，我的问题是您看到的第一个模态框必须在白色模态框的后面，我该如何更改它们的位置？

这是图片

黑色模态应该在后面，白色模态应该在前面我怎样才能做到这一点？请帮忙谢谢。

这是我专门制作的白色模态框

    <div class="text-center col-md-8" style="margin-left: 250px;">

         <div class="jumbotron">
          <h1><u>THIS IS AN ANNOUNCEMENT</u></h1>
          <h1>Please read the announcement</h1>
          <h3>You are a safe passenger</h3>
          <h1><?php echo $row['id']; ?> <?php echo $row['additional_info']; ?></h1>
          <p><a class="btn btn-primary btn-lg" href="#" role="button">TAPOS NA!</a></p>
        </div>

    </div>

标题显示白色模态

这是黑色模态

    <!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content"> ......

白色模态的样式

             <style type="text/css">
        @import url(https://fonts.googleapis.com/css?family=Open+Sans);
    @import url(https://fonts.googleapis.com/css?family=Federo);

    body {
        /* general styles */

        font-family: 'Open Sans', sans-serif;

    }

    /* overlay styles, all needed */
    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-color: rgba(0,0,0,0.5);
        z-index: 10;
    }


    .content {
        margin: 30px;
}

Answer 1

我会更改白色模态的 z-index。

z-index 为元素分配一个值，该值指示哪些元素比其他元素可见。

将您的白色模态 div 样式更改为:

<div class="text-center col-md-8" style="margin-left: 250px; z-index:1000;"> 

1000 的 z-index 相当高。您可以通过逐渐降低值直到它隐藏在另一个模态后面来进行测试。 z-index 为 10 可能就足够了。

您还可以检查当前的 css 以查看最高的 z-index 是多少，然后将其提高。

无论您做出什么决定，您都可以将其合并到 CSS 类中，并将该类应用于元素。

您的 CSS 显示了一个 z-index 为 10 的覆盖类，但我没有看到覆盖类在您的代码中应用的位置。您可能会调查的内容。

希望对您有所帮助。