Floating Alert

v0.0.0

Please prefer Floating alert v2 over this component.

A floating alert

<!-- Button type: solid  -->
<button data-floating-alert-msg="Alert triggered message" type="button" class="vi-floating-alert-trigger vi-btn-solid vi-btn">Alert!</button>
<!-- Floating Alert  -->
<div class="vi-floating-alert">
  <p class="vi-floating-alert__message mb-0"></p>
  <div class="vi-floating-alert__icon-container">
    <svg aria-label="cross-sign" class="vi-icon" height="16" role="img" sg-icons-dir="sg/components/icon/icons" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
      <path d="M14 3l-.8-.8-5.6 5.7L2 2.2l-.8.8 5.7 5.6-5.7 5.7.8.7 5.6-5.7 5.6 5.7.8-.7-5.7-5.7z"></path>
    </svg>
  </div>
</div>

Second floating alert #

A Second floating alert

<!-- Button type: solid  -->
<button data-floating-alert-msg="A second alert message" type="button" class="vi-floating-alert-trigger vi-btn-solid vi-btn">Alert!</button>
<!-- Floating Alert  -->
<div class="vi-floating-alert">
  <p class="vi-floating-alert__message mb-0"></p>
  <div class="vi-floating-alert__icon-container">
    <svg aria-label="cross-sign" class="vi-icon" height="16" role="img" sg-icons-dir="sg/components/icon/icons" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
      <path d="M14 3l-.8-.8-5.6 5.7L2 2.2l-.8.8 5.7 5.6-5.7 5.7.8.7 5.6-5.7 5.6 5.7.8-.7-5.7-5.7z"></path>
    </svg>
  </div>
</div>

Javascript #

The function triggerAlert is added to the global scope for triggering the floating alert.

<!-- Button type: solid  -->
<button onclick='triggerAlert("Howdy")' type="button" class="vi-btn-solid vi-btn">Howdy!</button>
<!-- Floating Alert  -->
<div class="vi-floating-alert">
  <p class="vi-floating-alert__message mb-0"></p>
  <div class="vi-floating-alert__icon-container">
    <svg aria-label="cross-sign" class="vi-icon" height="16" role="img" sg-icons-dir="sg/components/icon/icons" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
      <path d="M14 3l-.8-.8-5.6 5.7L2 2.2l-.8.8 5.7 5.6-5.7 5.7.8.7 5.6-5.7 5.6 5.7.8-.7-5.7-5.7z"></path>
    </svg>
  </div>
</div>

Stylesheets #

The following stylesheets are required to display this component.

JavaScript #

The following javascript is required to display this component.

Download Floating Alert JavaScript

Usage documentation #

Usage documentation can be found here.

Usage Documentation

Changelog #

Changelog

Changed

  27 Feb 2023 - Update markup css and js.


Fix

  15 Apr 2025 - (floating-alert) Fix stacking order in regard to new header.
  17 Feb 2023 - Fix wrong variable declaration.


Added

  14 Feb 2023 - thematized
  Initial draft