英文:
How can I make Bootstrap alert appear on top of other elements?
问题
我有一个输入框,如果值在按钮点击时无效,应该发送一个Bootstrap警告。我希望警告框出现在输入框的顶部。
现在,它显示在输入框下面。有没有办法让它出现在页面中间,位于文本框的顶部?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const btn = document.getElementById("mybtn");
btn.addEventListener("click", () => {
document.getElementById("show-alert").classList.remove("d-none")
});
<!-- language: lang-html -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
<div class="d-flex align-items-center justify-content-center" id="record">
<div class="input-group mb-3 input-group-lg w-50">
<input type="text" class="form-control" id="rec-id" placeholder="Enter ID">
<button class="btn btn-success" id="mybtn" type="button">Enter</button>
</div>
</div>
<div class="d-flex align-items-center justify-content-center d-none" id="show-alert">
<div class="alert alert-danger alert-dismissible fade show row">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>Danger!</strong> Button was clicked
</div>
</div>
<!-- end snippet -->
同时,在关闭警告框时,有没有办法添加回 d-none
类?
英文:
I have an input box that if the value is not valid on button click should send out a bootstrap alert. I want the alert to appear on top of the input box.
Right now, it is showing below the input box. Is there a way to make it appear in the middle of the page on top of the text box?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const btn = document.getElementById("mybtn");
btn.addEventListener("click", () => {
document.getElementById("show-alert").classList.remove("d-none")
});
<!-- language: lang-html -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
<div class="d-flex align-items-center justify-content-center" id="record">
<div class="input-group mb-3 input-group-lg w-50">
<input type="text" class="form-control" id="rec-id" placeholder="Enter ID">
<button class="btn btn-success" id="mybtn" type="button">Enter</button>
</div>
</div>
<div class="d-flex align-items-center justify-content-center d-none" id="show-alert">
<div class="alert alert-danger alert-dismissible fade show row">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>Danger!</strong> Button was clicked
</div>
</div>
<!-- end snippet -->
Also on closing the alert box, is there a way to add the d-none
class back?
答案1
得分: 1
似乎您想要一个垂直居中的模态框。这可能会为您提供更好、更可访问的用户体验。
如果您确实想要警报框,Bootstrap提供了方法来显示它们。始终尽量与库一起工作,而不是单独使用它,以减少工作量。这也是使其可重用的方法。
要回答所提出的问题,可以使用定位类。我使用了 position-fixed
来相对于视口而不是父元素设置警报,居中是使用 top-50 start-50 translate-middle
完成的。
英文:
Seems like you want a vertically centered modal. It would probably give you a better, more accessible UX.
If you do want an alert, Bootstrap provides methods for showing them. Always try to work with a library, not alongside it, to reduce effort. That's also how you'd make it reusable.
To answer the question as asked, use positioning classes. I used position-fixed
to set the alert with respect to the viewport instead of a parent element, and centering is done with top-50 start-50 translate-middle
.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const btn = document.getElementById("mybtn");
btn.addEventListener("click", () => {
document.getElementById("show-alert").classList.remove("d-none")
});
<!-- language: lang-html -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
<div class="d-flex align-items-center justify-content-center" id="record">
<div class="input-group mb-3 input-group-lg w-50">
<input type="text" class="form-control" id="rec-id" placeholder="Enter ID">
<button class="btn btn-success" id="mybtn" type="button">Enter</button>
</div>
</div>
<p>Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. </p>
<p>Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. </p>
<p>Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. </p>
<p>Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. </p>
<p>Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. Other content. </p>
<div class="position-fixed top-50 start-50 translate-middle d-flex align-items-center justify-content-center d-none" id="show-alert">
<div class="alert alert-danger alert-dismissible fade show row">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>Danger!</strong> Button was clicked
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论