What is the best way to display a Bootstrap alert above all other elements on the page?

I need help with adjusting the placement of my bootstrap alert. Currently, when the input box value is not valid and the button is clicked, the alert shows up below the input box. I would like it to appear in the middle of the page, on top of the text box. Is there a way to achieve this?

const btn = document.getElementById("mybtn");
btn.addEventListener("click", () => {
  document.getElementById("show-alert").classList.remove("d-none")
});
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0d6f6262797e797f6c7d4d38233e233d">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="11727e637451233f20203f29">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="583a37372c2b2c2a3928186d766b">[email protected]</a>/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>

Additionally, I'm looking for a way to automatically add back the "d-none" class when closing the alert box. Can anyone help with this?

javascriptcsstwitter-bootstrapbootstrap-5alert

Answer №1

It appears that you are interested in implementing a vertically centered modal. This can greatly enhance the user experience and accessibility of your project.

If you require an alert instead, Bootstrap offers various methods for displaying them effectively. It is advised to integrate these features collaboratively with the library to minimize manual efforts and maximize reusability.

To address your specific query, utilize positioning classes. In this scenario, I employed the position-fixed class to position the alert relative to the viewport rather than a parent element while centering it using top-50 start-50 translate-middle.

const btn = document.getElementById("mybtn");
btn.addEventListener("click", () => {
  document.getElementById("show-alert").classList.remove("d-none")
});
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1a7875756e696e687b6a5a2f3429342a">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d3b0bca1b693e1fde2e2fdeb">[email protected]</a>/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fa9895958e898e889b8abacfd4c9d4ca">[email protected]</a>/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. 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for utilizing useQuery when props change using Apollo:

I am currently facing a challenge with my BooksList component where I need to pass props down to the BooksDetails component only when a title is clicked. I am trying to figure out how to utilize an Apollo hook to query only on prop changes. I have been ex ...

javascriptreactjsgraphqlapollo

Ways to center-align this menu (Spanish language)

I am working on optimizing the alignment of the menu on my website: My goal is to center the menu, as the English version looks good. #site-navigation { width: 980px; margin: 0 auto; text-align: left; } After analyzing the code, we have iden ...

htmlcss

The function res.render is not displaying the new page

I have a task that seems straightforward. On my header, I am loading a few a links. <a class="nav-link" href="menu">Menu 1</a> I am attempting to access the URL /menu from this link. In my app.js file: app.use('/', index); app.us ...

javascriptnode.jsexpress

Storing repeated inputs in local storage multiple times

I am working on a feature where I need to store data in local storage multiple times using a dropdown menu and some input fields. Currently, I am able to retrieve all the values from the input fields and see them in the console log. My goal is to save thes ...

javascriptangularjsionic-frameworkangular-local-storage

Is there a way to modify the package version with yarn, either upgrading or downgrading?

Is there a way to downgrade the version of a package using yarn's "dependencies" feature? ...

javascriptnpmyarnpkg

Tips for changing the background with a jquery slider

Using a jquery slider, I have a single layout with a center div for content. I am trying to change the color of the layout as I slide to a different page. This is for an ASP.NET MVC3 project. HTML: <div id="iPhone_Product"> <div class="s ...

javascriptasp.netasp.net-mvcjquery-slider

Is it possible to prevent the selected option from being available in other select lists using AngularJS?

Can anyone help me figure out how to disable an option in one select list when it is selected in another using AngularJS? I have set up a select list for From Year and To Year with ng-repeat, which is working fine. Now, I just need to implement the functio ...

javascriptangularjsangularjs-select

Retrieving the selected value from a Bootstrap dropdown using JavaScript when there are multiple dropdowns present

I have created multiple rows in javascript that are being rendered to the DOM from a Firestore collection. Each row contains a Bootstrap dropdown with the same select options (".a" elements). The id attribute of each row div is dynamically set based on the ...

javascriptbootstrap-4google-cloud-firestoredrop-down-menu

Issues arise when using Jquery events in conjunction with AngularJS causing them to function

I have encountered an issue with my AngularJS menu code. I am sending an array to prepare the menu when the document loads. In this sequence, I have also added a click event to the generated menu. However, the click event does not fire if it is placed befo ...

javascriptjqueryangularjs

What are the benefits of adding member functions to the data structures of React.js store?

Using React.js and Typescript, I store plain Javascript objects in the React.js store. These objects are sometimes received from the server without any member functions, but I wish to add functions for better organization. Instead of having to rely on exte ...

javascriptjsonreactjstypescriptimmutability

What is the best way to display content next to an image, as well as below the image once it finishes?

Currently, I am working on customizing my blog posts in WordPress. My goal is to have the content of each post displayed next to the post thumbnail, and once the image ends, the content should seamlessly flow underneath it from the left side. I have imple ...

htmlcsswordpressbootstrap-4text-alignment

Combining two divs to share the same linear gradient and shadow effect

Greetings to all our valued partners! I am seeking guidance on how to achieve the following task for a web application I am developing: Within my webapp, I have designed a stylish NavBar similar to the examples depicted in the images (in AdobeXD it is di ...

htmlcssmergeshadow

Performing a cross-domain JSON Get request with JQuery

Struggling with a simple JSON get request to an API on a domain that I don't have control over. Here's the code I'm using: $(document).ready(function () { $.ajax({ type: 'GET', url: 'http://pu ...

javascriptjqueryajaxjson

Encountered a CastError in Mongoose when trying to cast the value "Object" to a string

I am struggling with a Mongoose CastError issue within my Node.js API. The problem arises at a specific route where data is being returned appended with some additional information. Despite finding various solutions for similar problems, my scenario seems ...

javascriptnode.jsmongodbexpressmongoose

What is the best way to trigger a refresh in Next.js React component?

Current Tech Stack Versions Next.js : 14.0.3 React : 18.0.2 // TestClientComponent.tsx "use client"; import { IResident } from "@interface/resident.types"; import { getResidents } from "@models/resident.service"; import { So ...

javascriptreactjsnext.js

typescript in conjunction with nested destructuring

ES6 has definitely made coding more efficient by reducing the number of lines, but relying solely on typescript for everything may not be the best approach. If I were to implement type checking for arguments that have been destructed multiple levels deep, ...

javascripttypescriptecmascript-6react-tsx

Understanding Pass by Reference within Objects through Extend in Javascript with underscore.js Library

When working with Javascript and using the extend function in the underscore.js library, I am curious about what happens in relation to memory. Consider this example: var obj = {hello: [2]}; var obj2 = {hola: [4]}; _.extend(obj, obj2) obj2.hola = 5; conso ...

javascriptpass-by-reference

PHP enables users to look at manual values in columns and MySQL values row by row

I have created a PHP program to organize seating arrangements for an exam hall. The user manually inputs the names of the halls, which should be displayed in columns in a table. The register numbers are fetched from a MySQL database and should be displayed ...

javascriptphpmysqlhtml-table

When the state inspection fails due to a missing object property, the function will not work as intended

I'm currently in the process of developing a weather app. The user will input either a zip code or a city name + state, triggering the $.getJSON function to gather data. One key feature I am working on involves checking if the user's input is va ...

javascriptjqueryobjectif-statementgetjson

JavaScript's menu button has a callback function assigned to it

The definition can be found below. var CMenu = cc.Sprite.extend({ onClickCallback: null, onClick: function (callback) { this.onClickCallback = callback; }, handleTouches: function (touch, evt) { (this.hovered && this.onClickCallback) &am ...

javascript