jquery - Bootstrap 删除警报的不透明度

Question

我正在使用 Bootstrap 模式作为简单的登录表单:

<div class="modal fade login">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body row">        
                <div class="modal-header">
                    <h4>Login panel</h4>
                </div>
                <form class="capture" method="post" name="login">
                    <div class="form-group">
                        <input type="email" name="email" class="form-control" placeholder="Username">
                    </div>
                    <div class="form-group">
                        <input type="password" name="password" class="form-control" placeholder="Password">
                    </div>
                    <button type="button" class="form-group btn btn-default btn-block">Login</button>
                </form>
                <div class="modal-footer"><center><button type="button" class="btn btn-default btn-block" data-dismiss="modal">Close</button></center></div>
            </div>
        </div>
    </div>
</div>

我还使用 jQuery 来处理登录并返回回调，我想使用 boostrap 将其显示为警报框。

这工作正常，但是警报消息受到模式不透明度的影响并且很难看到。

如何使警报消息框出现而不受模态不透明度的影响？

我尝试了以下 CSS:

.notification{
    position: fixed;
    top: 3em;
    left: 20%;
    right: 20%;
    z-index: 1000;
    opacity:0;
}

div如下

<div id="notification"></div>

由以下 jquery 控制，该 jquery 从模态内部触发:

function flash(type,message){
        $(".notification").remove();
        $("#notification").append($("<div class='notification alert alert-" + type + " fade in' data-alert><a class='close' data-dismiss='alert'>×</a><b>"+type.charAt(0).toUpperCase()+type.slice(1)+"</b>: "+message+"</div>"));
        $(".notification").delay(4000).fadeOut("slow", function () { $(this).remove(); });
    }

但是，消息框仍然受到不透明度的阻碍。

Answer 1

您只需将 z-index 稍微调大一些即可。如果您检查 .modal 的样式，您会发现它的 z-index 为 1050。您需要设置您的 z-index 等于或大于该值。

.notification{
    position: fixed;
    top: 3em;
    left: 20%;
    right: 20%;
    z-index: 1051; /* must be equal to or larger than .modal */
    opacity:0;
}

这是一个JSFiddle以供引用。希望这会有所帮助。