模态警报答案

【问题标题】：Alert over Modal模态警报
【发布时间】：2015-11-18 08:34:12
【问题描述】：

我正在尝试在 Modal 顶部显示此警报，但无法使其正常工作。相反，它显示在 Modal 后面。

html:

    <alert class="alertmessage" ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">
            <small>{{alert.msg}}</small>
    </alert>

CSS：

    .alertmessage {
        position: fixed;
        top: 50%;
        left: 50%;
        width: 300px;
        margin-left: -150px;
        margin-top: -100px;
        text-align: center;
        z-index: 99999 !important;
        outline: 9999px solid rgba(0,0,0,0.8);
        border-radius: 0px;
    }

模态css是这样的：

    element.style {
        z-index: 1040;
        display: block;
    }

我错过了什么？我希望看到警报出现在 Modal 之上。

【问题讨论】：

可能每个容器都具有不同的 z-indexes，这些 z-indexes 覆盖了子 z-indexes。
模态的 z-index 没有大于 1050。我什至尝试过 z-index: 99999999999999999999999999999999999999 !important;对于 .alertmessage 类，但这没有帮助！我也看不到任何覆盖。希望有Bootstrap Modal经验的人可以回答。
如果某个地方的父母比其他地方的父母低，孩子的 Z 指数并不重要。例如，如果我有两个索引为 1 和 2 的 div A 和 B，那么无论我在 A 内的 div 上放置什么，它都将始终位于 B 下方，因为父容器 z-indexes 将覆盖。请发布所有相关的 HTML 和 CSS。
没有必须代码继续但仍然无法重现错误jsfiddle.net/benxmf5y我删除了z-index并且警报仍然在模态之上
我正在使用 angularJS 并且不能在模态代码中包含警报，因为警报是全局调用的。当我将警报放在模态之外时它仍然落后：jsfiddle.net/benxmf5y/1

标签： html css twitter-bootstrap twitter-bootstrap-3 bootstrap-modal

【解决方案1】：

您可以尝试将警报代码放在模态 div 本身的一个 div 中并保持隐藏，然后在需要时触发警报。如果警报在模态框内，那么它肯定会出现在模态框上方。

【讨论】：

我的意思是把警报信息放在模态代码中。它对我有用，检查更新的小提琴：jsfiddle.net/benxmf5y/3
我正在使用 AngularJS 并且不能将它包含在模态代码中，因为我也必须为非模态错误报告调用警报。此外，当我尝试在警报顶部使用 div 时，整个网站都会进入覆盖模式！看来我必须弄清楚自己，因为我不能分享整个网站：/

【解决方案2】：

这是一个适用于您的更新的 Fiddle。 http://jsfiddle.net/benxmf5y/5/

我所做的唯一更改是添加

z-index: 999999;

【讨论】：

出于某种原因，它可以在这里工作，但不能在我的 AngularJS 上工作！我最初添加了 x-index 。无论如何，我已经删除了警报系统，而是在模态本身上以红色抛出错误。非常感谢:)