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供参考。希望这会有所帮助。

Bootstrap删除警报的不透明度

1 个答案: