如何使Bootstrap警告框显示在其他元素的顶部?

huangapple go评论71阅读模式
英文:

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(&quot;mybtn&quot;);
btn.addEventListener(&quot;click&quot;, () =&gt; {
  document.getElementById(&quot;show-alert&quot;).classList.remove(&quot;d-none&quot;)
});

<!-- language: lang-html -->

&lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;/&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;

&lt;div class=&quot;d-flex align-items-center justify-content-center&quot; id=&quot;record&quot;&gt;
    &lt;div class=&quot;input-group mb-3 input-group-lg w-50&quot;&gt;
      &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;rec-id&quot; placeholder=&quot;Enter ID&quot;&gt;
      &lt;button class=&quot;btn btn-success&quot; id=&quot;mybtn&quot; type=&quot;button&quot;&gt;Enter&lt;/button&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;d-flex align-items-center justify-content-center d-none&quot; id=&quot;show-alert&quot;&gt;
    &lt;div class=&quot;alert alert-danger alert-dismissible fade show row&quot;&gt;
      &lt;button type=&quot;button&quot; class=&quot;btn-close&quot; data-bs-dismiss=&quot;alert&quot;&gt;&lt;/button&gt;
      &lt;strong&gt;Danger!&lt;/strong&gt; Button was clicked
    &lt;/div&gt;
  &lt;/div&gt;

<!-- 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(&quot;mybtn&quot;);
btn.addEventListener(&quot;click&quot;, () =&gt; {
  document.getElementById(&quot;show-alert&quot;).classList.remove(&quot;d-none&quot;)
});

<!-- language: lang-html -->

&lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; /&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;

&lt;div class=&quot;d-flex align-items-center justify-content-center&quot; id=&quot;record&quot;&gt;
  &lt;div class=&quot;input-group mb-3 input-group-lg w-50&quot;&gt;
    &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;rec-id&quot; placeholder=&quot;Enter ID&quot;&gt;
    &lt;button class=&quot;btn btn-success&quot; id=&quot;mybtn&quot; type=&quot;button&quot;&gt;Enter&lt;/button&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;p&gt;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. &lt;/p&gt;

&lt;p&gt;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. &lt;/p&gt;

&lt;p&gt;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. &lt;/p&gt;

&lt;p&gt;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. &lt;/p&gt;

&lt;p&gt;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. &lt;/p&gt;

&lt;div class=&quot;position-fixed top-50 start-50 translate-middle d-flex align-items-center justify-content-center d-none&quot; id=&quot;show-alert&quot;&gt;
  &lt;div class=&quot;alert alert-danger alert-dismissible fade show row&quot;&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn-close&quot; data-bs-dismiss=&quot;alert&quot;&gt;&lt;/button&gt;
    &lt;strong&gt;Danger!&lt;/strong&gt; Button was clicked
  &lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年7月11日 00:51:26
  • 转载请务必保留本文链接:https://go.coder-hub.com/76655813.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定