HTML & CSS - 模态正在覆盖另一个模态答案

【问题标题】：HTML & CSS - Modal is Overlaying another ModalHTML & CSS - 模态正在覆盖另一个模态
【发布时间】：2019-06-01 05:41:19
【问题描述】：

我需要解决这个问题我的问题是你看到的第一个模态必须在白色模态的后面我怎样才能改变它们的位置？

这是图片

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

这是我特意制作的白色模式

    <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;
}

【问题讨论】：

我认为当您在样式表中为类覆盖定义属性时，html 中应该有一个覆盖类名称的白色模态
检查白色模态的z-index，它应该高于黑色模态。
howww @BrixAngeles 我应该设置什么值？
白色模态的 z-index 是多少？你能发布你的代码吗？
@BrixAngeles 谢谢

标签： php html css bootstrap-modal

【解决方案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 的覆盖类，但我看不到覆盖类在您的代码中的应用位置。你可能会研究的东西。

希望对你有帮助。

【讨论】：