Question

我正在使用引导程序警报来显示成功和错误消息。我想将这些提醒叠加在另一个<h1>jQuery validation and cloning form sections</h1> <div id="entry1" class="clonedInput"> <h2>Form</h2> <form id="aform" class="aform" name="aform" method="get"> <div> <label for="fullname">Full Name</label> <input id="fullname" class="fullname" name="fullname" minlength="2" required> </div> </form> </div> <p> <button type="button" id="btnAdd" name="btnAdd" class="btn btn-info">add section</button> <button type="button" id="btnDel" name="btnDel" class="btn btn-danger">remove section above</button> </p> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="http://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script>的顶部。我读过的帖子很少（here），建议使用div但这对我不起作用。在我的场景中需要做两件事。

1＆GT;所有警报都需要位于另一个postion:fixed的顶部。 （我认为在我的情况下由于div类中的背景颜色即时设置隐藏了警报。但是我们需要一些内容div的背景颜色

2 - ; mt-form-panel需要位于alert-success

的顶部

我有JSFiddle here

Answer 1

您可以使用z-index将警报置于最前面。

这样的事情：

.mt-alerts {
    position:fixed;
    z-index: 999;
}

Answer 2

使用z-index:1000让.mt-alerts显示在.mt-form-panel之上。

对于第2点，你可以做两件事。

A）从它的外观来看，似乎一次只会出现1个警报，而且两者都不能同时出现。在这种情况下，您可以将两个警报上的display:none;设置为默认值，并在满足相应代码条件时将其设置回display:block。

B）您可以使用position:absolute以及边距和特定宽度将警报放在同一位置。

如何在顶部显示引导程序警报

2 个答案: