Just created a simple CSS role that makes your alert align to the middle of the screen. Here’s a preview of it on my app.
If the size of the alert exceeds the screen size, the alert will become scrollable (and confined to 90% of screen size by default).
Here is the CSS code for the role
.anvil-role-center-alert {
overflow: hidden;
top: 50%;
margin: 0 auto;
transform: translateY(-50%) !important;
}
.anvil-role-center-alert.modal-content {
overflow-y: auto;
max-height: 90vh;
}
alert('Something', role='center-alert')
Optionally, you can also implement the blur effect (as shown in the screenshot) by adding this to your theme.css (will apply for all alerts)
#alert-modal {
backdrop-filter: blur(8px); /*Adjust value according to your need*/
-webkit-backdrop-filter: blur(8px); /*Adjust value according to your need*/
}