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索引。

z-index为元素分配一个值，该值指示在其他元素上可以看到哪些元素。

将白色模式div样式更改为此：

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

z索引为1000很高。您可以通过逐步降低该值直到它隐藏在其他模态之后进行测试。 z索引为10可能就足够了。

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

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

您的CSS显示了一个z-index为10的覆盖类，但是我看不到覆盖类在您的代码中的应用位置。您可能会研究的东西。

希望有帮助。

HTML和CSS-模态叠加了另一个模态

1 个答案: