引导程序删除不透明度以发出警报

Question

我正在为一个简单的登录表单使用引导模式：

<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供参考。希望这可以帮助。